it-swarm.com.de

CSS: Wie kann ich die Bildgröße relativ zur übergeordneten Höhe einstellen?

Ich versuche herauszufinden, wie die Größe eines Bildes geändert werden kann, damit es das Verhältnis von Breite zu Höhe beibehält. Die Größe wird jedoch so lange geändert, bis die Höhe des Bildes mit der Höhe des enthaltenen Div übereinstimmt. Ich habe diese Bilder, die ziemlich groß und lang sind (Screenshots), und ich möchte sie für die Anzeige in eine 200-Pixel-Breite und eine 180-Pixel-Höhe unterteilen, ohne die Größe der Bilder manuell zu ändern. Damit dies gut aussieht, müssen die Seiten des Bildes überlaufen und mit dem enthaltenden div verborgen sein. Das habe ich bisher:

http://jsfiddle.net/f9krj/2/

[~ # ~] html [~ # ~]

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

[~ # ~] CSS [~ # ~]

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

Wie Sie sehen, wird auf dem übergeordneten Bildcontainer eine graue Farbe angezeigt, die überhaupt nicht angezeigt werden sollte. Damit dieser Behälter vollständig gefüllt ist, muss die Breite auf beiden Seiten gleich groß sein. Ist das möglich? Ist es auch möglich, ein zu großes Bild zu berücksichtigen?

62
Jon McPherson

Ursprüngliche Antwort:

Wenn Sie sich für CSS3 entscheiden möchten, können Sie die Eigenschaft css3 translate verwenden. Ändern Sie die Größe, je nachdem, was größer ist. Wenn Ihre Höhe größer und die Breite kleiner als der Container ist, wird die Breite auf 100% gedehnt und die Höhe von beiden Seiten gekürzt. Gleiches gilt auch für größere Breite.

Ihr Bedarf, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

Und CSS:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

Voila! Arbeiten: http://jsfiddle.net/shekhardesigner/aYrhG/

Erläuterung

DIV wird auf die Position relative gesetzt. Dies bedeutet, dass alle untergeordneten Elemente die Startkoordinaten (Ursprünge) erhalten, von denen dieser DIV beginnt.

Das Bild wird als BLOCK-Element festgelegt. min-width/height Beides, das auf 100% festgelegt wird, bedeutet, dass die Größe des Bilds unabhängig von seiner Größe mindestens 100% der Größe des übergeordneten Bilds beträgt. min ist der Schlüssel. Wenn die Bildhöhe um die Mindesthöhe die Höhe des übergeordneten Elements überschreitet, ist dies kein Problem. Es wird nach Mindestbreite gesucht und versucht, die Mindesthöhe auf 100% der Eltern festzulegen. Beides geht umgekehrt. Dies stellt sicher, dass es keine Lücken um das Div gibt, das Bild jedoch immer etwas größer ist und durch overflow:hidden; Beschnitten wird.

Nun wird image mit left:50% Und top:50% Auf eine absolute Position gesetzt. Mittel Schieben Sie das Bild 50% von oben nach links, um sicherzustellen, dass der Ursprung aus DIV stammt. Die linken/oberen Einheiten werden vom übergeordneten Element aus gemessen.

Magischer Moment:

transform: translate(-50%, -50%);

Diese translate -Funktion von CSS3 transform -Eigenschaft verschiebt/positioniert nun ein fragliches Element neu. Diese Eigenschaft bezieht sich auf das angewendete Element, daher bedeuten die Werte (x, y) OR (-50%, -50%)), dass das Bildnegativ um 50% der Bildgröße nach links verschoben und nach verschoben wird die negative Spitze um 50% der Bildgröße.

Z.B. Wenn die Bildgröße 200px × 150px betrug, wird transform:translate(-50%, -50%) für die Übersetzung berechnet (-100px, -75px). % Einheit hilft, wenn wir verschiedene Bildgrößen haben.

Dies ist nur eine knifflige Methode, um den Schwerpunkt des Bildes und des übergeordneten DIV herauszufinden und diesen zuzuordnen.

Entschuldigung, dass es zu lange gedauert hat zu erklären !

Ressourcen, um mehr zu lesen:

66

Ändern Sie Ihren Code:

a.image_container img {
    width: 100%;
}

Dazu:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

32

Verwenden max-width Eigenschaft von CSS, wie folgt:

img{
  max-width:100%;
}
11
UniCoder