it-swarm.com.de

Bild an einen Begrenzungsrahmen anpassen

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

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

Beispiel:

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

97
Thomas Guillory

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

Nein, es gibt keinen CSS-Weg, um dies in beide Richtungen zu tun. Sie könnten hinzufügen

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

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

.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. CSS kann dies nicht.

Der Grund ist, dass CSS nicht weiß, wie die Seite aussieht. Es legt 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. Das kann man nur mit JavaScript feststellen.


Obwohl Sie nicht nach einer JS-Lösung suchen, füge ich trotzdem eine hinzu, wenn jemand sie braucht. Der einfachste Weg, dies mit JavaScript zu handhaben, ist das Hinzufügen einer Klasse basierend auf dem Verhältnisunterschied. Wenn das Verhältnis von Breite zu Höhe der Box größer ist als das des Bildes, fügen Sie die Klasse "Füllbreite" hinzu, ansonsten fügen Sie die Klasse "Füllhöhe" 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>

85
Stephan Muller

Dank CSS3 gibt es eine Lösung!

Die Lösung ist, das Bild als background-image zu setzen und dann den background-size auf contain zu setzen.

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 Variation verwenden:

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

Hier ist eine hackhafte 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-image-Lösung funktioniert dies auch mit <video>-Elementen.

33

Sagen Sie heute einfach object-fit: enthalten. Support ist alles außer IE: http://caniuse.com/#feat=object-fit

18
Glenn Maynard

Dies kann mit reinem CSS erreicht werden, sowohl für vertikal lange als auch horizontal lange Bilder zur gleichen Zeit.

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

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>

1
gabrielmaldi

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

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.

1
ericosg

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ätten Sie so etwas:

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

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;*/
}
1
Deke

Ich habe die Tabelle verwendet, um das Bild in der Box zu zentrieren. Das Seitenverhältnis wird beibehalten und das Bild wird so skaliert, dass es sich vollständig in der Box befindet. Wenn das Bild kleiner als das Kästchen ist, wird es so angezeigt, wie es in der Mitte ist. Der folgende Code verwendet ein Feld mit einer Breite von 40px und einer Höhe von 40px. (Nicht ganz sicher, wie gut es funktioniert, weil ich es aus einem anderen, komplexeren Code entfernt und etwas 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>
0
Antti

Das hat mir geholfen:

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

Dann auf das 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!

0
bman93

In diesem Beispiel wird das Bild proportional gestreckt, damit es in das gesamte Fenster passt. Eine Improvisation für den obigen korrekten Code ist das Hinzufügen von $( 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. Die erste prüft ständig, ob die Bildhöhe geringer als div ist und wendet die Klasse .fillheight an, während die nächste die Breite prüft und die Klasse .fillwidth anwendet. In beiden Fällen wird die andere Klasse mit .removeClass() entfernt.

Hier ist das CSS

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

Sie können 100vh durch 100% ersetzen, wenn Sie das Bild in einem div strecken möchten. In diesem Beispiel wird das Bild proportional an das gesamte Fenster angepasst.

0
Mr. JCRP

Der sauberste und einfachste Weg, dies zu tun:

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

Das HTML:  

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

Das sollte den Trick tun!

0
Robert Eetheart