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 (unter Beibehaltung des Seitenverhältnisses)? 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 ist.

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

Dank CSS3 gibt es eine Lösung!

Die Lösung besteht darin, das Bild als zu setzen background-image und dann die einstellen background-size zu contain.

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

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

Edit 2: In der Moderne mit object-fit könnte eine noch bessere Lösung sein: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

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

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

Um ein Element immer auf 100% Breite zu haben und die Höhe automatisch auf das Seitenverhältnis zu skalieren, oder das Gegenteil:

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

um immer auf maximale Höhe und relative Breite zu 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 tun.

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. Die einzige Möglichkeit, dies zu erkennen, ist mit JavaScript.

Obwohl Sie nicht nach einer JS-Lösung suchen, werde ich trotzdem eine hinzufügen, falls jemand sie benötigen könnte. Der einfachste Weg, dies mit JavaScript zu handhaben, besteht darin, eine Klasse basierend auf dem Unterschied im Verhältnis hinzuzufügen. Wenn das Verhältnis von Breite zu Höhe der Box größer ist als das des Bildes, fügen Sie die Klasse „fillwidth“ hinzu, andernfalls fügen Sie die Klasse „fillheight“ hinzu.

$('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>

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

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

Dadurch wird das Bild um das Zehnfache vergrößert, aber auf 10 % seiner endgültigen Größe beschränkt – und somit an den Container gebunden.

nicht so wie background-image Lösung, dies wird auch mit funktionieren <video> Elemente.

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 objekttauglich: enthalten. Support ist alles außer IE: http://caniuse.com/#feat=object-fit

html:

    <div class="container">
      <img class="flowerImg" src="https://stackoverflow.com/questions/9994493/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 als auch für horizontal lange Bilder gleichzeitig.

Hier ist ein Ausschnitt, der in Chrome, Firefox und Safari funktioniert (beide verwenden object-fit: scale-down, und ohne es zu verwenden):

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 die Notwendigkeit eines Containers (obwohl die maximalen Größen des Begrenzungsrahmens bekannt sein müssen):

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

Wenn die Verwendung eines Containers erforderlich ist, können die maximale Breite und die maximale Höhe auf 100 % gesetzt werden:

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ättest du sowas wie:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="https://stackoverflow.com/questions/9994493/image5.png" /></div>
        </td>
    </tr>
</table>