Bei falschem Bildformat mittigen Bildausschnitt anzeigen

[proggie743]

Hallo,

ich verzweifle gerade an einem kleinem CSS-Problem und kam weder mit Google, noch mit der Foren-Suche weiter (Vielleicht habe ich auch einfach nach den falschen Begriffen gesucht.. :D), ich hoffe, dass ihr mir helfen könnt.

Ich programmiere im Moment eine simpel aufgebaute Bildergalerie für meine Website. Da kommt es gelegentlich auch vor, dass ein Bild (zum Beispiel im Hochformat) nicht in meine 180x120px großen Vorschaukästchen passt und somit unter verlust der Proportionen gestreckt wird.
Wie ist es mit CSS möglich, dass bei zu hohen Bildern nicht das ganze Foto 'gequetscht' wird, sondern nur ein 180x120px großer Ausschnitt aus der Mitte des Bildes zu sehen ist?

Mein bisheriger HTML-Code:

  
<div class='gallery'>  
	<div class='gallery_top'>  
		<div class='gallery_moving'>  
			<img class='gallery_viewbox' src='upload/gallery/min/DSC00821.jpg' />  
		</div>  
	</div>  
	<img class='gallery_photo' src='upload/gallery/min/DSC00821.jpg' />  
	<img class='gallery_photo' src='upload/gallery/min/IMG_0100.jpg' />  
</div>  

CSS:

  
div.gallery  
{  
	width: 728px;  
	margin-right: auto;  
	margin-left: auto;  
}  
  
div.gallery div.gallery_top  
{  
	margin-left: 1px;  
	margin-right: 1px;  
	margin-bottom: 1px;  
	height: 406px;  
}  
  
div.gallery div.gallery_top div.gallery_moving  
{  
	width: 726px;  
	text-align: center;  
}  
  
div.gallery div.gallery_top div.gallery_moving img.gallery_viewbox  
{  
	position: relative;  
	vertical-align: bottom;  
	display: inline-block;  
	margin-top: 3px;  
	margin-bottom: 3px;  
	height: 400px;  
}  
  
div.gallery img.gallery_photo  
{  
	margin: 1px;  
	width: 180px;  
	height: 120px;  
	cursor: pointer;  
	vertical-align: bottom;  
}  

Über den Vorschaubildern ist oben ein großes Vorschaufenster zu sehen. Die Fotos werden bei einem Klick dort in groß angezeigt. Das Vorschaufenster scrollt mit, daher der Name 'gallery_moving'.

Hier ein kleines Bild zur Verdeutlichung:

Ich bedanke mich schon einmal im Vorraus für jegliche Hilfe!

[Onkel Schnitzel]

Hallo,

Wie ist es mit CSS möglich, dass bei zu hohen Bildern nicht das ganze Foto 'gequetscht' wird, sondern nur ein 180x120px großer Ausschnitt aus der Mitte des Bildes zu sehen ist?

mit der CSS-Eigenschaft 'background-size' geht das sehr schön, 'contain' dürfte da dein Wert der Wahl sein. Mit dem img-Tag wird das sicherlich etwas schwieriger umzusetzen sein. Eventuell könnte man statt <img> das <figure>-Element nutzen und diesem das Bild als background zuweisen. Ob das semantisch korrekt ist, ist sicherlich eine andere Frage, einigen hier wird das sicherlich nicht gefallen :-)

Gruß

Onkel Schnitzel

[proggie743]

Hallo,

Wie ist es mit CSS möglich, dass bei zu hohen Bildern nicht das ganze Foto 'gequetscht' wird, sondern nur ein 180x120px großer Ausschnitt aus der Mitte des Bildes zu sehen ist?

mit der CSS-Eigenschaft 'background-size' geht das sehr schön, 'contain' dürfte da dein Wert der Wahl sein. Mit dem img-Tag wird das sicherlich etwas schwieriger umzusetzen sein. Eventuell könnte man statt <img> das <figure>-Element nutzen und diesem das Bild als background zuweisen. Ob das semantisch korrekt ist, ist sicherlich eine andere Frage, einigen hier wird das sicherlich nicht gefallen :-)

Gruß

Onkel Schnitzel

Vielen Dank,

das klingt gut. Jetzt fällt mir auch ein, dass ich ebenfalls mit dieser CSS-Eigenschaft mein Hintergrundbild positioniert habe, aber auf die Idee auf diese Weise auch die Bilder zu positionieren bin ich bisher nicht gekommen...

Ich werde die img-Tags dann vermutlich einfach durch div-Tags ersetzen und die CSS-Attribute dementsprechend anpassen. Wie ich jquery dann noch beibringe anstatt des src-Attributes den Pfad des Hintergrundbildes zu verwenden muss ich mal sehen.

Sobald ich es zum Laufen bekommen habe, werde ich die Galerie hier veröffentlichen: http://galerie.marcusw.de

VG proggie743

[Matthias Apsel]

Om nah hoo pez nyeetz, proggie743!

Lege nur entweder Höhe oder Breite fest und vergib maximale Abmessungen.

Ich bedanke mich schon einmal im Vorraus für jegliche Hilfe!

Gerrn ;-)

Matthias