Wie können Sie die Größe eines großen Bilds automatisch ändern, damit es in einen Div-Container mit kleinerer Breite passt, während das Verhältnis von Breite zu Höhe beibehalten wird?

Beispiel: stackoverflow.com - Wenn ein Bild in das Editorfenster eingefügt wird und das Bild zu groß ist, um auf die Seite zu passen, wird die Größe des Bilds automatisch geändert.

Wenden Sie keine explizite Breite oder Höhe auf das Bild-Tag an. Geben Sie es stattdessen:

max-width:100%;
max-height:100%;

Auch height: auto;wenn Sie nur eine Breite angeben möchten.

Beispiel: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

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

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Objektanpassung

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.

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

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

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

Die Wahl der Höhe oder Breite hängt von Ihren Bild- und Behälterabmessungen ab:

1. Wenn Ihr Bild und Ihr Container beide "Hochformat" oder beide "Querformat" sind (größer als breit oder breiter als hoch), spielt es keine Rolle, welche Höhe oder Breite "% 100" sind. .
2. Wenn Ihr Bild im Hochformat und Ihr Container im Querformat ist, müssen Sie height="100%"das Bild festlegen .
3. Wenn Ihr Bild im Querformat und Ihr Container im Hochformat ist, müssen Sie width="100%"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 Erweiterung für den Container automatisch erfolgen.

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

height
width
viewbox

Die meisten Vektorzeichnungsprogramme 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, die Ihr Bild sowohl vertikal als auch horizontal innerhalb eines Divs ausrichtet, 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 einen festen height und setzen Sie dann für das darin enthaltene imgTag widthund max-height.

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

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

Ein wunderschöner Hack.

Sie haben zwei Möglichkeiten, um das Bild ansprechbar zu machen.

1. Wenn ein Bild ein Hintergrundbild ist.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://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>

Führen Sie es hier aus

2. Wenn sich das Bild im imgTag befindet.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Führen Sie es hier aus

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

background-size: cover;

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

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

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

Angesichts eines solchen 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;
}

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

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, schneidet jedoch einen Teil des Bildes.

HTML:

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

CSS:

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

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

Ich sehe, dass viele Leute eine Objektanpassung vorgeschlagen haben, was eine gute Option ist. Aber wenn Sie möchten, dass es auch in älteren Browsern funktioniert , gibt es eine andere Möglichkeit, dies einfach zu tun.

Es ist ganz einfach. Der Ansatz, den ich gewählt habe, bestand darin, das Bild mit Absolut im Container zu positionieren und es dann mit der Kombination genau in der Mitte zu platzieren :

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 von Object-Fit: Cover.

Hier ist eine Demonstration der obigen Logik.

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

Diese Logik funktioniert in allen Browsern.

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 eines beliebigen Seitenverhältnisses an ein Containerelement mit einem bestimmten Seitenverhältnis anpassen. Und es ist ein Muss, wenn diese ganze Sache voll ansprechbar ist.

/* 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 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 leicht in der Mitte unten positionieren).

Geben Sie dem div, das das <img> -Tag enthält, die Höhe und Breite ein, die Sie für Ihr Bild benötigen. Vergessen Sie nicht, die Höhe / Breite im richtigen Stil-Tag anzugeben.

Geben Sie im <img> -Tag das max-heightund max-widthals 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.

Der folgende Code wurde aus früheren Antworten übernommen und von mir anhand eines Bildes mit dem Namen getestet storm.jpg.

Dies ist der vollständige HTML-Code für eine einfache Seite, auf der das Bild angezeigt wird. Dies funktioniert perfekt und wurde von mir mit www.resizemybrowser.com getestet. Fügen Sie den CSS-Code oben in Ihren HTML-Code unter Ihrem Kopfbereich ein. Geben Sie den Bildcode an einer beliebigen 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>

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

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

Bearbeiten: Die vorherige tabellenbasierte Bildpositionierung hatte Probleme in Internet Explorer 11 ( max-heightfunktioniert nicht in display:tableElementen). Ich habe es durch eine Inline-basierte Positionierung ersetzt, die nicht nur in Internet Explorer 7 und Internet Explorer 11 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-widthund max-heightnicht mit Containern auszukommen scheint, die keine konkrete Größe haben), aber ich habe den CSS-Inhalt so geschrieben, dass er wiederverwendet werden kann ( picture-frameKlasse hinzufügen) und px125Größenklasse zu Ihrem vorhandenen Container).

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 (Hochskalieren von Bildern):

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

Ich habe dieses Problem mit dem folgenden 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%;
}

Wie hier beantwortet , können Sie auch vhEinheiten verwenden, anstatt, max-height: 100%wenn dies in Ihrem Browser nicht funktioniert (wie Chrome):

img {
    max-height: 75vh;
}

Ich habe ein Bild innerhalb eines Hyperlinks sowohl horizontal als auch vertikal proportional zentriert und 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 hier .

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 größer 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;den Stil hinzufügen .
2. Mit einem Skalierungsfaktor von 4 haben Sie eine maximale Breite = 400/4 = 100 und eine maximale Höhe = 200/4 = 50
3. Eine alternative Lösung besteht darin, die maximale Breite und Höhe auf 25% einzustellen. Es ist noch einfacher.

Wenn Sie Bootstrap verwenden, müssen Sie nur die img-responsiveKlasse zum imgTag hinzufügen :

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

Bootstrap-Bilder

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

1. Wenden Sie das CSS-Styling auf den Bildcontainer an (z. B. <img>).
2. Stellen Sie die Eigenschaft width auf die gewünschte Bemaßung ein
   • Verwenden Sie %für Bemaßungen 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 Dimension
3. Stellen Sie die Höheseigenschaft so ein, dass sie basierend auf der Breite automatisch angepasst wird
4. GENIESSEN!

Zum Beispiel,

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

Alle bereitgestellten Antworten, einschließlich der akzeptierten, funktionieren nur unter der Annahme, dass der divWrapper eine feste Größe hat. So geht's, unabhängig von der Größe des divWrappers, und dies ist sehr nützlich, wenn Sie eine reaktionsfähige Seite entwickeln:

Schreiben Sie diese Erklärungen in Ihren DIVSelektor:

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

Fügen Sie dann diese Erklärungen in Ihren IMGSelektor ein:

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

SEHR WICHTIG:

Der Wert maxHeightmuss das sein gleiche sowohl für die DIVund IMGWähler.

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 */
}

Stellen Sie die enthaltene Bildbreite auf 100% ein und Sie sollten ein schönes zentriertes Bild im Container erhalten, wobei die Abmessungen erhalten bleiben.

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

Fügen Sie das Bild einfach in ein div und dann in die HTML-Datei ein, 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, teilen 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>

Der einfachste Weg, dies zu tun, ist die Verwendung von object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Wenn Sie Bootstrap verwenden, fügen Sie einfach die img-responsiveKlasse hinzu und ändern Sie zu

.container img{
    object-fit: cover;
}

Überprüfen Sie meine Antwort: Machen Sie ein Bild reaktionsschnell - einfachster Weg -

img{
    width: 100%;
    max-width: 800px;
}

Oder Sie können einfach verwenden:

background-position:center;
background-size:cover;

Jetzt nimmt das Bild den gesamten Raum des Div ein.