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

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

Sie benötigen JavaScript, um das Zuschneiden zu verhindern, wenn Sie die Dimension des Bildes zum Zeitpunkt des Schreibens des 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.

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

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

Um das Bildverhältnis während der Skalierung zu speichern, können Sie auch die object-fitCSS3-Eigenschaft verwenden.

Nützlicher Artikel: Steuern Sie die Bildseitenverhältnisse mit CSS3

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

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

Nur CSS verwenden:

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

HTML

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

CSS

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

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

Dadurch wird das Bild erweitert, um das übergeordnete Bild zu füllen, dessen Größe im divCSS festgelegt ist.

Ich hatte viele Probleme, dies zum Laufen zu bringen. Jede einzelne Lösung, die ich fand, schien nicht zu funktionieren.

Mir wurde klar, dass ich die Div-Anzeige auf Flex einstellen musste, also ist dies im Grunde mein CSS:

div{
display: flex;
}

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

Versuchen Sie CSS:

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

Für mich hat das folgende CSS funktioniert (getestet in Chrome, Firefox und Safari).

Es gibt mehrere Dinge, die zusammenarbeiten:

• max-height: 100%;, max-width: 100%;Und height: auto;, width: auto;machen den img Skala ersten 100% erreicht zu welcher Dimension , während das Seitenverhältnis bleibt dabei erhalten
• position: relative;im behälter und position: absolute;im kind zusammen mit top: 50%;und left: 50%;zentrieren der oberen linken ecke des img im behälter
• transform: translate(-50%, -50%); Bewegt das Bild um die Hälfte seiner Größe nach links und oben zurück und zentriert so das Bild im Behälter

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%);
}

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

Wenn wir möchten, dass das div das gleiche Seitenverhältnis wie das Foto hat, ist placeholder.png ein kleines transparentes Bild mit dem gleichen Seitenverhältnis wie photo.jpg. Wenn es sich bei dem Foto um ein Quadrat handelt, handelt es sich um einen Platzhalter im Format 1 x 1 Pixel. Wenn es sich bei dem Foto um ein Miniaturbild des Videos handelt, handelt es sich um einen Platzhalter im Format 16 x 9 usw.

Verwenden Sie für die Frage einen 1x1-Platzhalter, um das quadratische Verhältnis des Div beizubehalten, und ein Hintergrundbild background-size, um das Seitenverhältnis des Fotos beizubehalten.

Ich habe verwendet, background-position: center center;damit das Foto in der Div zentriert wird. (Wenn Sie das Foto in der vertikalen Mitte oder unten ausrichten, wird das Foto im img-Tag hässlich.)

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 eine Daten-URL .

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

Sie können die Klasse "img-fluid" für eine neuere Version verwenden, dh Bootstrap v4 .

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

Verwendung : -

img tag mit: -

class = "img-fluid"

src = "..."

Hier ist ein All-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 jedes Mal um 10% verkleinert, wenn es fehlschlägt:

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.

Was für mich funktioniert hat war:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

Inline-Flex war erforderlich, um zu verhindern, dass die Bilder außerhalb des Divs angezeigt werden.