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

Ich versuche herauszufinden, wie ein Bild in der Größe geändert werden kann, damit das Verhältnis von Breite zu Höhe erhalten bleibt. Die Größe wird jedoch 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 und ohne manuelle Größenänderung der Bilder in ein Div mit 200 Pixel Breite und 180 Pixel Höhe einfügen. Damit dies gut aussieht, müssen die Seiten des Bildes überlaufen und mit dem enthaltenen div ausgeblendet werden. 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 können, wird auf dem übergeordneten Bildcontainer eine graue Farbe angezeigt, die überhaupt nicht angezeigt werden sollte. Damit dieser Behälter vollständig gefüllt werden kann, muss die Breite auf beiden Seiten gleichmäßig überlaufen. Ist das möglich? Ist es auch möglich, ein zu großes Bild zu berücksichtigen?

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 basierend auf dem, was größer ist. Wenn Ihre Höhe größer und die Breite kleiner als der Behälter ist, wird die Breite auf 100% gedehnt und die Höhe von beiden Seiten abgeschnitten. Gleiches gilt auch für größere Breiten.

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 ist auf die relativePosition eingestellt. Dies bedeutet, dass alle untergeordneten Elemente die Startkoordinaten (Ursprünge) erhalten, von denen aus dieser DIV beginnt.

Das Bild wird als BLOCK-Element festgelegt. min-width/heightBeide Werte auf 100% bedeuten, dass die Größe des Bilds unabhängig von seiner Größe auf mindestens 100% des übergeordneten Elements geändert wird . minist der Schlüssel. Wenn die Bildhöhe um die Mindesthöhe die Höhe des Elternteils überschreitet, ist dies kein Problem. Es wird nach einer Mindestbreite gesucht und versucht, die Mindestgröße auf 100% der Eltern festzulegen. Beides geht umgekehrt. Dies stellt sicher, dass es keine Lücken um das Div gibt, aber das Bild ist immer etwas größer und wird durchgeschnittenoverflow:hidden;

Nun imagewird diese auf eine Set - absolutePosition mit left:50%und top:50%. Schieben Sie das Bild um 50% von oben nach links, um sicherzustellen, dass der Ursprung von DIV stammt. Linke / obere Einheiten werden vom Elternteil gemessen.

Magischer Moment:

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

Diese translateFunktion der CSS3- transformEigenschaft verschiebt / positioniert ein fragliches Element neu. Diese Eigenschaft behandelt das angewendete Element, daher bedeutet der Wert (x, y) ODER (-50%, -50%), dass das Bildnegativ um 50% der Bildgröße nach links und um 50% der Bildgröße nach oben verschoben wird .

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

Dies ist nur eine schwierige Methode, um den Schwerpunkt des Bildes und des übergeordneten DIV zu ermitteln und abzugleichen.

Entschuldigung, dass Sie zu lange gebraucht haben, um es zu erklären!

Ressourcen, um mehr zu lesen:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

Ä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/

Verwenden Sie die max-widthEigenschaft von CSS wie folgt:

img{
  max-width:100%;
}

Wenn Sie die Antwort Shekhar K. Sharma nehmen und es fast funktioniert, müssen Sie auch dies height: 1px;oder das hinzufügen, width: 1px;damit es funktioniert.

Sie können dafür eine Flexbox verwenden. Dies wird Ihr Problem lösen

.image-parent 
{
     height:33px; 
     display:flex; 
}