001
Wie ändern Sie die Größe eines großen Bildes automatisch, sodass es in einen Div-Container mit kleinerer Breite passt, während das Breite:Höhe-Verhältnis beibehalten wird?
Beispiel: stackoverflow.com – wenn ein Bild in das Bearbeitungsfeld eingefügt wird und das Bild zu groß ist, um auf die Seite zu passen, wird die Größe des Bilds automatisch angepasst.
Shih Min Lee
Es stellt sich heraus, dass es einen anderen Weg gibt, dies zu tun.
<img style="height: 100%; width: 100%; object-fit: contain"/>
wird die Arbeit machen. Es ist CSS 3 Zeug.
Dadurch wird das Bild so skaliert, dass die größere Dimension vollständig in den Container passt, sodass die kleinere Dimension es möglicherweise nicht vollständig abdeckt. Um stattdessen die größere Abmessung zuzuschneiden, verwenden Sie object-fit: cover
– Gabriel Grant
20. Oktober 2015 um 17:08 Uhr
Ich habe das ausprobiert und dann festgestellt, dass das, was ich brauchte, war object-fit:cover;. Perfekt.
– XEROling
Vor 2 Tagen
Demütiger Rumble
Hier ist eine Lösung, die Ihr Bild ohne Dehnung sowohl vertikal als auch horizontal innerhalb eines Div ausrichtet, selbst wenn das gelieferte Bild zu klein oder zu groß ist, um in das Div zu passen.
Der HTML-Inhalt:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
Der CSS-Inhalt:
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
Der jQuery-Teil:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
TylerH
Sie haben zwei Möglichkeiten, das Bild responsiv zu machen.
Wenn ein Bild ein Hintergrundbild ist.
#container{
width: 300px;
height: 300px;
background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div id="container"><div>
Starte es Hier
Aber man sollte verwenden img Tag, um Bilder zu setzen, da es besser ist als background-image bezüglich SEO wie du schreiben kannst Stichwort in dem alt des img Schild. Hier können Sie also das Bild responsiv machen.
Wenn Bild drin ist img Schild.
#container{
max-width: 400px;
overflow: hidden;
}
img{
width: 100%;
object-fit: contain;
}
<div id="container">
<img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>
Starte es Hier
Peter Mortensen
Mach es einfach!
Geben Sie dem Behälter a Fest height und dann für die img tag darin, set width und max-height.
<div style="height: 250px">
<img src="https://stackoverflow.com/questions/3029422/..." alt=" " style="width: 100%;max-height: 100%" />
</div>
Der Unterschied besteht darin, dass Sie die festlegen width 100% zu sein, nicht die max-width.
Einige interessante Bibliotheken zum Anpassen der Bildgröße an den Container: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
– Frostiges Z
13. Juli 2011 um 13:10 Uhr
Abgesehen von @ Kevins Antwort … Sie können auch Dienste wie ImageBoss verwenden, um Ihre Bilder bei Bedarf in der gewünschten Größe zu erstellen. Das Einpassen des Bildes in den Container ist großartig, aber das reaktionsschnelle Bereitstellen von Bildern ist viel schwieriger.
– Igor Escobar
24. Mai 2018 um 21:35 Uhr
Mögliches Duplikat: stackoverflow.com/questions/1891857/…
– jolumg
17. Oktober 2018 um 10:33 Uhr
@jolumg Nicht ganz; Während es bei einigen Lösungen viele Überschneidungen gibt, gibt es auch viele Lösungen, die nicht austauschbar sind, da diese fragt, wie ein Bild vergrößert werden soll, während diese fragt, wie ein Bild verkleinert werden soll.
– TylerH
2. Januar 2019 um 15:37 Uhr