Skalieren Sie das Bild so, dass es in einen Begrenzungsrahmen passt

Gibt es eine reine CSS-Lösung, um ein Bild in einen Begrenzungsrahmen zu skalieren (wobei das Seitenverhältnis beibehalten wird)? Dies funktioniert, wenn das Bild größer als der Container ist:

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

Beispiel:

• Anwendungsfall 1 (funktioniert): http://jsfiddle.net/Jp5AQ/2/
• Anwendungsfall 2 (funktioniert): http://jsfiddle.net/Jp5AQ/3/

Aber ich möchte das Bild vergrößern, bis eine Dimension 100% des Containers beträgt.

• Anwendungsfall 3 (funktioniert nicht): http://jsfiddle.net/Jp5AQ/4/

Hinweis: Obwohl dies die akzeptierte Antwort ist, ist die folgende Antwort genauer und wird derzeit in allen Browsern unterstützt, wenn Sie die Möglichkeit haben, ein Hintergrundbild zu verwenden.

Nein, es gibt keine CSS-Möglichkeit, dies in beide Richtungen zu tun. Sie könnten hinzufügen

.fillwidth {
    min-width: 100%;
    height: auto;
}

Damit das Element immer 100% breit ist und die Höhe automatisch auf das Seitenverhältnis oder umgekehrt skaliert :

.fillheight {
    min-height: 100%; 
    width: auto;
}

immer auf maximale Höhe und relative Breite skalieren. Um beides zu tun, müssen Sie feststellen, ob das Seitenverhältnis höher oder niedriger als der Container ist, und CSS kann dies nicht.

Der Grund ist, dass CSS nicht weiß, wie die Seite aussieht. Es legt vorher Regeln fest, aber erst danach werden die Elemente gerendert und Sie wissen genau, mit welchen Größen und Verhältnissen Sie es zu tun haben. Dies lässt sich nur mit JavaScript erkennen.

Obwohl Sie nicht nach einer JS-Lösung suchen, werde ich trotzdem eine hinzufügen, wenn jemand sie benötigt. Der einfachste Weg, dies mit JavaScript zu handhaben, besteht darin, eine Klasse hinzuzufügen, die auf dem Unterschied im Verhältnis basiert. Wenn das Verhältnis von Breite zu Höhe des Felds größer als das des Bildes ist, fügen Sie die Klasse "Füllbreite" hinzu, andernfalls die Klasse "Füllhöhe".

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

Dank CSS3 gibt es eine Lösung!

Die Lösung besteht darin, das Bild als zu setzen background-imageund dann auf background-sizezu setzencontain .

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Testen Sie es hier: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Volle Kompatibilität mit den neuesten Browsern: http://caniuse.com/background-img-opts

Um das Div in der Mitte auszurichten, können Sie diese Variante verwenden:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Hier ist eine hackige Lösung, die ich entdeckt habe:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

Dadurch wird das Bild verzehnfacht, aber auf 10% seiner endgültigen Größe beschränkt, wodurch es an den Container gebunden wird.

Im Gegensatz zur background-imageLösung funktioniert dies auch mit <video>Elementen.

Interaktives Beispiel:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

Sagen Sie heute einfach Objektanpassung: enthalten. Support ist alles andere als IE: http://caniuse.com/#feat=object-fit

html:

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

CSS:

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


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Sie können dies mit reinem CSS und vollständiger Browserunterstützung erreichen, sowohl für vertikal lange als auch für horizontal lange Bilder gleichzeitig.

Hier ist ein Ausschnitt, der in Chrome, Firefox und Safari funktioniert (sowohl mit object-fit: scale-downals auch ohne Verwendung):

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Eine andere Lösung ohne Hintergrundbild und ohne Container (obwohl die maximale Größe des Begrenzungsrahmens bekannt sein muss):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

Dafür hätten Sie so etwas wie:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

In diesem Beispiel wird das Bild proportional gedehnt, um es an das gesamte Fenster anzupassen. Eine Improvisation zum obigen korrekten Code ist hinzuzufügen$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

Es gibt zwei if-Bedingungen. Der erste prüft ständig, ob die Bildhöhe kleiner als der div ist, und wendet die .fillheightKlasse an, während der nächste die Breite prüft und die .fillwidthKlasse anwendet . In beiden Fällen wird die andere Klasse mit entfernt.removeClass()

Hier ist das CSS

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Sie können ersetzen 100vhdurch , 100%wenn Sie mit in einem div um das Bild zu strecken. In diesem Beispiel wird das Bild proportional gedehnt, um es an das gesamte Fenster anzupassen.

Möchten Sie nach oben, aber nicht nach unten skalieren?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

Dies sperrt jedoch nicht das Seitenverhältnis.

Ich habe Tabelle verwendet, um Bild in der Box zu zentrieren. Es behält das Seitenverhältnis bei und skaliert das Bild so, dass es sich vollständig in der Box befindet. Wenn das Bild kleiner als das Feld ist, wird es so angezeigt, wie es sich in der Mitte befindet. Der folgende Code verwendet ein Feld mit einer Breite von 40 Pixel und einer Höhe von 40 Pixel. (Ich bin mir nicht ganz sicher, wie gut es funktioniert, da ich es aus einem anderen komplexeren Code entfernt und ein wenig vereinfacht habe.)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Der sauberste und einfachste Weg, dies zu tun:

Zuerst etwas CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

Der HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

Dies sollte den Trick machen!

Das hat mir geholfen:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

Dann auf dem Element (Sie können Javascript oder Medienabfragen verwenden, um die Reaktionsfähigkeit zu erhöhen):

<div class='img-class' style='transform: scale(X);'></div>

Hoffe das hilft!

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

Ich bearbeite meine Antwort, um meine Lösung weiter zu erläutern, da ich eine Abwertung habe.

Mit den oben in CSS gezeigten Stilen zeigt das folgende HTML-Div nun, dass das Bild immer in der Breite passt, und passt das Seitenverhältnis der Höhe zur Breite an. Somit wird das Bild so skaliert, dass es zu einem Begrenzungsrahmen passt, wie in der Frage gestellt.

<div class="boundingbox"><img src="image.jpg"/></div>