Wie ändere ich die Größe eines Bildes automatisch, um es an einen "div" -Container anzupassen?

Objektanpassung

Es stellt sich heraus, dass es einen anderen Weg gibt, dies zu tun.

<img style='height: 100%; width: 100%; object-fit: contain'/>

werde die Arbeit machen. Es ist CSS 3 Zeug.

Fiddle: http://jsfiddle.net/mbHB4/7364/

Derzeit gibt es keine Möglichkeit, dies bei Bildern mit fester Größe wie JPEGs oder PNG-Dateien deterministisch korrekt durchzuführen.

m die Größe eines Bildes proportional zu ändern, müssen Sie entweder die Höhe oder die Breite auf "100%" setzen, aber nicht beide. Wenn Sie beide auf "100%" setzen, wird Ihr Bild gestreckt.

Die Wahl zwischen Höhe und Breite hängt von Ihrem Bild und den Abmessungen Ihres Containers ab:

1. Wenn Ihr Bild und Ihr Container beide "hochformatig" oder "querformatig" sind (größer als breit bzw. breiter als hoch), spielt es keine Rolle, welche Höhe oder Breite "% 100" ist. .
2. Wenn es sich bei Ihrem Bild um ein Hochformat und bei Ihrem Container um ein Querformat handelt, müssen Sie height="100%" für das Bild festlegen.
3. Wenn es sich bei Ihrem Bild um ein Querformat und bei Ihrem Container um ein Hochformat handelt, müssen Sie width="100%" für das Bild festlegen.

Wenn es sich bei Ihrem Bild um eine SVG-Datei handelt, bei der es sich um ein Vektorbildformat mit variabler Größe handelt, kann die an den Container angepasste Erweiterung automatisch erfolgen.

Sie müssen nur sicherstellen, dass in der SVG-Datei keine dieser Eigenschaften im Tag <svg> festgelegt ist:

height
width
viewbox

Die meisten Vektorzeichenprogramme legen diese Eigenschaften beim Exportieren einer SVG-Datei fest, sodass Sie Ihre Datei bei jedem Export manuell bearbeiten oder ein Skript schreiben müssen, um dies zu tun.

Hier ist eine Lösung, mit der Sie Ihr Bild innerhalb eines Divs sowohl vertikal als auch horizontal ausrichten können, ohne es zu dehnen, 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);
    }

Mach es einfach!

Geben Sie dem Container ein fixedheight und setzen Sie dann für das darin enthaltene img -Tag width und max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Der Unterschied besteht darin, dass Sie width auf 100% setzen, nicht auf max-width.

Schauen Sie sich meine Lösung an: http://codepen.io/petethepig/pen/dvFsA

Es ist in reinem CSS geschrieben, ohne JavaScript-Code. Es kann Bilder jeder Größe und Ausrichtung verarbeiten.

Angesichts solcher HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

der CSS-Code wäre:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Sie können das Bild als Hintergrund für ein div festlegen und dann die CSS-Eigenschaft für Hintergrundgröße verwenden:

background-size: cover;

Es wird "Skalieren Sie das Hintergrundbild so groß wie möglich, damit der Hintergrundbereich vollständig vom Hintergrundbild bedeckt wird. Einige Teile des Hintergrundbilds sind möglicherweise nicht in der Hintergrundposition sichtbar Bereich " - W3Schools

Ich habe gerade ein jQuery-Plugin veröffentlicht, das genau das tut, was Sie brauchen, mit vielen Optionen:

https://github.com/GestiXi/image-scale

Verwendungszweck:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

Diese Lösung streckt das Bild nicht und füllt den gesamten Container aus, schneidet jedoch einen Teil des Bildes aus.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

Folgendes funktioniert perfekt für mich:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Ich habe eine viel bessere Lösung ohne JavaScript. Es ist voll ansprechbar und ich benutze es oft. Sie müssen häufig ein Bild mit einem beliebigen Seitenverhältnis an ein Containerelement mit einem bestimmten Seitenverhältnis anpassen. Und es ist ein Muss, wenn das Ganze vollständig anspricht.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Sie können die maximale Breite und die maximale Höhe unabhängig voneinander einstellen. Das Bild berücksichtigt das kleinste (abhängig von den Werten und dem Seitenverhältnis des Bildes). Sie können das Bild auch so einstellen, dass es wie gewünscht ausgerichtet wird (z. B. können Sie ein Produktbild auf einem unendlichen weißen Hintergrund so positionieren, dass es leicht in der Mitte unten liegt).

Sie müssen dem Browser mitteilen, in welcher Höhe Sie ihn platzieren:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Der folgende Code wurde aus früheren Antworten übernommen und von mir mit einem Bild namens storm.jpg getestet.

Dies ist der vollständige HTML-Code für eine einfache Seite, auf der das Bild angezeigt wird. Das funktioniert einwandfrei und wurde von mir mit www.resizemybrowser.com getestet. Platzieren Sie den CSS-Code oben in Ihrem HTML-Code unter Ihrem Kopfbereich. Geben Sie den Bildcode an der gewünschten Stelle ein.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

Ich habe ein Bild in einem Hyperlink horizontal und vertikal so zentriert und proportional skaliert:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Es wurde in Internet Explorer, Firefox und Safari getestet.

Weitere Informationen zum Zentrieren finden Sie unter hier .

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Geben Sie die Höhe und Breite, die Sie für Ihr Bild benötigen, an das div mit dem <img> -Tag an. Vergessen Sie nicht, die Höhe/Breite im richtigen Style-Tag anzugeben.

Geben Sie im <img> -Tag max-height und max-width als 100% an.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Sie können die Details in den entsprechenden Klassen hinzufügen, nachdem Sie es richtig gemacht haben.

Bearbeiten: Die vorherige tabellenbasierte Bildpositionierung hatte Probleme in Internet Explorer 11 (max-height funktioniert nicht in display:table Elementen). Ich habe es durch Inline-basierte Positionierung ersetzt, die nicht nur in Internet Explorer 7 und Internet Explorer 11 einwandfrei funktioniert, sondern auch weniger Code erfordert.

Hier ist meine Sicht auf das Thema. Es funktioniert nur, wenn der Container eine bestimmte Größe hat (max-width und max-height scheinen nicht mit Containern auszukommen, die keine konkrete Größe haben), aber ich habe den CSS-Inhalt in a geschrieben Art und Weise, wie es wiederverwendet werden kann (fügen Sie picture-frame Klasse und px125 Größenklasse zu Ihrem vorhandenen Container hinzu).

In CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Und in HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Bearbeiten: Mögliche weitere Verbesserung mit JavaScript (Bilder hochskalieren):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Die akzeptierte Antwort von Thorn007 funktioniert nicht, wenn das Bild zu klein ist .

Um dies zu lösen, habe ich einen Skalierungsfaktor hinzugefügt. Auf diese Weise wird das Bild vergrößert und der Div-Container gefüllt.

Beispiel:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-Origin:left top;" />
</div>

Anmerkungen:

1. Für WebKit müssen Sie -webkit-transform:scale(4); -webkit-transform-Origin:left top; in den Style einfügen.
2. Mit einem Skalierungsfaktor von 4 haben Sie max-width = 400/4 = 100 und max-height = 200/4 = 50
3. Eine alternative Lösung besteht darin, die maximale Breite und die maximale Höhe auf 25% festzulegen. Es ist noch einfacher.

Ich sehe, dass viele Leute Vorschläge zur Objektanpassung machen, was eine gute Option ist. Wenn Sie jedoch auch in älteren Browsern arbeiten möchten , gibt es eine andere Möglichkeit, dies problemlos zu tun.

Bitte überprüfen Sie meine Antwort hier: IE und Edge Fix für Objekt-Fit: Cover;

Es ist ganz einfach. Der Ansatz, den ich gewählt habe, war, das Bild mit absolut in den Container zu platzieren und es dann genau in der Mitte zu platzieren unter Verwendung der Kombination:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Sobald es in der Mitte ist, gebe ich dem Bild,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Dadurch erhält das Bild den Effekt „Objektanpassung: Deckung“.

Hier ist eine Demonstration der obigen Logik.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Diese Logik funktioniert in allen Browsern.

Als hier beantwortet können Sie auch vh Einheiten anstelle von max-height: 100% verwenden, wenn dies in Ihrem Browser nicht funktioniert (wie in Chrome):

img {
    max-height: 75vh;
}

Eine einfache Lösung (4-Schritt-Lösung !!), die für mich zu funktionieren scheint, ist unten. Das Beispiel verwendet die Breite, um die Gesamtgröße zu bestimmen. Sie können sie jedoch auch drehen, um stattdessen die Höhe zu verwenden.

1. Anwenden des CSS-Stils auf den Bildcontainer (z. B. <img>)
2. Legen Sie die width -Eigenschaft auf die gewünschte Dimension fest
   • Verwenden Sie für Bemaßungen % für die relative Größe oder die automatische Skalierung (basierend auf dem Bildcontainer oder der Anzeige).
   • Verwenden Sie px (oder eine andere) für eine statische oder festgelegte Bemaßung
3. Stellen Sie die Eigenschaft height so ein, dass sie automatisch an die Breite angepasst wird
4. GENIESSEN!

Zum Beispiel,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/Host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Alle angegebenen Antworten, einschließlich der akzeptierten, funktionieren nur unter der Annahme, dass der Wrapper div eine feste Größe hat. So wird es gemacht was auch immer Die Größe des Wrappers div ist sehr nützlich, wenn Sie eine responsive Seite entwickeln:

Schreiben Sie diese Deklarationen in Ihren DIV Selektor:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Fügen Sie dann diese Deklarationen in Ihren IMG Selektor ein:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

SEHR WICHTIG:

Der Wert von maxHeight muss gleich für die Selektoren DIV und IMG sein.

Ich habe dieses Problem mit folgendem Code behoben:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Wenn Sie Bootstrap verwenden, müssen Sie nur die Klasse img-responsive zum Tag img hinzufügen:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Bootstrap Images

Eine einfache Lösung ist die Verwendung von Flexbox. Definieren Sie das CSS des Containers wie folgt:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Wenn Sie die Breite des enthaltenen Bilds auf 100% einstellen, sollte das Bild im Container zentriert und die Abmessungen beibehalten werden.

Die Lösung ist einfach mit ein bisschen Mathe ...

Legen Sie das Bild einfach in ein div und dann in die HTML-Datei, in der Sie das Bild angeben. Stellen Sie die Werte für Breite und Höhe in Prozent ein, indem Sie die Pixelwerte des Bildes verwenden, um das genaue Verhältnis von Breite zu Höhe zu berechnen.

Angenommen, Sie haben ein Bild mit einer Breite von 200 Pixel und einer Höhe von 160 Pixel. Sie können mit Sicherheit sagen, dass der Breitenwert 100% beträgt, da es sich um den größeren Wert handelt. Um dann den Höhenwert zu berechnen, dividieren Sie einfach die Höhe durch die Breite, was den Prozentwert von 80% ergibt. Im Code sieht es ungefähr so ​​aus ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>