JavaScript jQuery Automatisches Skalieren von Bildern in einem Slider

[raven16]

Hallo,

ich versuche mich derzeit an die automatische Skalierung von Bildern innerhalb des Bootstrap-Sliders.
Die Höhe des Bildes wird derzeit automatisch mit jQuery an die Fensterhöhe des Bildschirmes angepasst.
Problem dabei ist natürlich, dass der Slider immer eine Breite von 100% haben soll. Dies führt dann natürlich zu der Zerstörung des Seitenverhältnisses der Bilder. Ich möchte daher mit jQuery das Bild automatisch zuschneiden.

Beispiel


HTML/PHP

<div class="container-fluid border-green-bottom padding-none" id="slider">
	<div id="main-slider" class="carousel fade" data-ride="carousel" data-pause="false">
		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">
			<div class="item">
				<img class="img-slider" src="<?php bloginfo('template_directory'); ?>/img/global/slider/pier.jpg" alt="Pier">
			</div>
			<div class="item active">
				<img class="img-slider" src="<?php bloginfo('template_directory'); ?>/img/global/slider/duehne.jpg" alt="Dühne">
			</div>
			<div class="item">
				<img class="img-slider" src="<?php bloginfo('template_directory'); ?>/img/global/slider/path.jpg" alt="Weg">
			</div>
		</div>
	</div>
</div>

jQuery

function mainSlider(){
	var sliderHeight = $(window).height() - $("#headerbox").height() - 20;
	$(".img-slider").css({"height":sliderHeight});
	sliderHeight = sliderHeight + 20;
	$("#slider").css({"height":sliderHeight});
	$("#main-slider").css({"height":sliderHeight});
	
	$('.carousel').carousel({
	  interval: 1000 * 7
	});
}
mainSlider();

Ich habe vorhin mal dieses Script getestet, aber dies führt nur dazu, dass der Slider weiß bleibt.

Gruß

 

[Cool Master]

Das machst du am besten über CSS, denn genau dafür ist es da

img{
    border: 0 none;
    display: block;
    height: auto;
    width: 100%;
}

JS bzw. jQuery ist nur für den Code und den korrekten Aufbau zuständig.

 

[blablub1212]

Man könnte das auch anders lösen, musst bzw. willst du das unbedingt mit JavaScript machen? Falls das nur eine Option für dich ist würde ich die Bilder mittels CSS als Background einbinden und dann das Property "background-size: cover" nutzen. Das macht prinzipiell genau das was du machen möchtest. Es wird versucht, dass Bild immer größtmöglich darzustellen, sollte es sich mit dem Seitenverhältnis nicht ausgehen, dann werden die Ränder entsprechend "abgeschnitten".

http://www.w3schools.com/cssref/css3_pr_background-size.asp

 

[Cool Master]

Das wäre eine Alternative. Eigentlich sogar besser, da du div. Bilder über das CSS laden kannst und somit für Mobile Geräte z.B. kleinere Bilder nehmen kannst die bis max. ~640px gehen und dann beim Desktop welche die bis 1280px oder mehr gehen.

 

[raven16]

Danke für die hilfreichen Tipps. Wenn ich auf JQuery verzichten kann, dann mache ich dies natürlich
Nur mein Bild hat nicht die volle Höhe des Bildschirmes, sondern abzüglich des Headers (Menü, Logo) und unter dem Bild kommt natürlich noch bald weiterer Content hinzu ;-)

 

[WhiteShark]

Als background-image einbinden ist zwar eine Möglichkeit, aber bei einem Slider suboptimal.
Denn <img> wird gerade bei Animationen schneller gerendet als ein background-image.

Das Bild soll immer 100% Höhe haben, also einfach width: auto; height: 100%;
.item natürlich auf overflow:hidden und max-width: 100%; setzen.

Achso, die Sliderhöhe, das geht auch per Javascript.
height: calc(100vh - 150px);

100vh heißt 100% des Viewports (also der Fensterhöhe). Anstatt 150px musst du halt die Höhe des Headers einsetzen.

#main-slider {
  height: calc(100vh -150px);
}
#main-slider .item {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#main-slider .item img {
  height: 100%;
  width: auto;
}

Wobei man IDs eigentlich nicht im CSS stylen sollte.

 

[Cool Master]

Als background-image einbinden ist zwar eine Möglichkeit, aber bei einem Slider suboptimal.
Denn <img> wird gerade bei Animationen schneller gerendet als ein background-image.

Pauschal kann man das nicht sagen. Mit CSS Sprites kann man z.B. deutlich schneller laden weil nur ein Bild geladen werden muss.

Wobei man IDs eigentlich nicht im CSS stylen sollte.

Is mir auch schon aufgefallen, dass dies immer mehr Leute machen. Also keine IDs mehr zu nehmen. Warum konnt mir bis dato noch nie jemand wirklich erklären.

 

[WhiteShark]

Ich sprach vom rendering nicht von der ladezeit. Und da sind img besser geeignet für Slider.

IDs sind etwas eindeutiges. Und es ist an sich nicht nötig etwas ganz anderes zu stylen als den Rest. Darum nimmt man Klassen, die man man wieder verwenden.