web-dev-qa-db-de.com

Wie passe ich ein Bild (img) in ein div ein und halte das Seitenverhältnis ein?

Ich habe ein 48x48 div und darin befindet sich ein img-Element. Ich möchte es in das div einfügen, ohne einen Teil zu verlieren. In der Zwischenzeit wird das Verhältnis beibehalten. Ist es mit HTML und CSS erreichbar?

116
Bin Chen

Sie benötigen etwas JavaScript, um das Beschneiden zu verhindern, wenn Sie die Dimension des Bildes zum Zeitpunkt des Schreibens der CSS nicht kennen.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Wenn Sie eine JavaScript-Bibliothek verwenden, möchten Sie diese möglicherweise nutzen.

61
Thomas

Verwenden Sie max-height:100%; max-width:100%; für das Bild im div.

289
Michael

Leider decken max-width + max-height meine Aufgabe nicht vollständig ab ... So habe ich eine andere Lösung gefunden: 

Zum Speichern des Bildverhältnisses während der Skalierung können Sie auch object-fit CSS3-Eigenschaft verwenden.

Nützlicher Artikel: Mit CSS3 das Bildseitenverhältnis steuern

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Schlechte Nachrichten: IE wird nicht unterstützt ( kann ich verwenden)

63

Nur CSS verwenden: 

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}
38
Max

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Dadurch wird das Bild so erweitert, dass es das übergeordnete Element ausfüllt, dessen Größe in der Variable div festgelegt ist.

16
alex

Ich hatte viele Probleme damit, dies zu funktionieren, jede einzelne Lösung, die ich fand, schien nicht zu funktionieren. 

Mir wurde klar, dass ich die div-Anzeige auf flex einstellen musste. Im Grunde ist dies mein CSS: 

div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}
6

Für mich funktionierte folgendes CSS (getestet in Chrome, Firefox und Safari).

Es gibt mehrere Dinge, die zusammenarbeiten:

  • max-height: 100%;, max-width: 100%; und height: auto;, width: auto; machen die img-Skala so, dass die erste Dimension 100% erreicht und das Seitenverhältnis beibehalten wird
  • position: relative; im Container und position: absolute; im Kind zusammen mit top: 50%; und left: 50%; zentrieren die obere linke Ecke des img im Container
  • transform: translate(-50%, -50%); verschiebt das Bild um die Hälfte zurück nach links und oben, wodurch das Bild im Behälter zentriert wird

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}
1
VSchlattinger

Versuchen Sie es mit CSS:

img {
  object-fit: cover;
  height: 48px;
}
1
Faisal

Wenn Sie das Foto als Hintergrundbild festlegen, haben wir mehr Kontrolle über Größe und Platzierung, sodass das img-Tag einen anderen Zweck erfüllt.

Wenn unten das div das gleiche Seitenverhältnis wie das Foto haben soll, dann ist placeholder.png ein kleines transparentes Bild mit demselben Seitenverhältnis wie photo.jpg. Wenn es sich bei dem Foto um ein Quadrat handelt, handelt es sich um einen Platzhalter mit 1 x 1 Pixel, wenn es sich bei dem Foto um eine Miniaturansicht eines Videos handelt, handelt es sich um einen 16 x 9-Platzhalter usw.

Verwenden Sie für die Frage spezifisch einen 1x1-Platzhalter, um das quadratische Verhältnis der Breite von div zu erhalten, und ein Hintergrundbild mit background-size, um das Seitenverhältnis des Fotos beizubehalten.

Ich habe background-position: center center; verwendet, damit das Foto im div zentriert wird. (Das Ausrichten des Fotos in der vertikalen Mitte oder Unterseite würde mit dem Foto im img-Tag hässlich werden.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Um eine zusätzliche http-Anforderung zu vermeiden, konvertieren Sie das Platzhalterbild in ein Datum: URL .

<img src="data:image/png;base64,..."/>
1
Webveloper

Hier ist ein JavaScript-Ansatz. Es skaliert ein Bild schrittweise nach unten, bis es richtig passt. Sie legen fest, um wie viel es bei jedem Ausfall verkleinert werden soll. In diesem Beispiel wird es bei jedem Fehlschlagen um 10% verkleinert:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Fühlen Sie sich frei, direkt zu kopieren und einzufügen.

0
Jared Beach

sie können die Klasse "img-fluid" für neuere Versionen verwenden, d. h. Bootstrap v4.

und kann die Klasse "img-responsive" für ältere Versionen wie Bootstrap v3 verwenden.

Verwendungszweck:-

img tag mit: -

Klasse = "img-fluid"

src = "..." 

0