Wie kann man ein Bild dehnen, um ein <div> zu füllen, während das Seitenverhältnis des Bildes beibehalten wird?

201

Ich muss dieses Bild auf die maximal mögliche Größe dehnen, ohne es zu überlaufen <div>oder das Bild zu verzerren.

Ich kann das Seitenverhältnis des Bildes nicht vorhersagen, daher kann ich nicht wissen, ob ich Folgendes verwenden soll:

<img src="url" style="width: 100%;">

oder

<img src="url" style="height: 100%;">

Ich kann nicht beide verwenden (dh style = "width: 100%; height: 100%;"), da dadurch das Bild so gedehnt wird, dass es zum passt <div>.

Die <div>Größe wird in Prozent des Bildschirms festgelegt, was ebenfalls unvorhersehbar ist.

Giffyguy
quelle
2
Wenn Sie das Bild benötigen, um entweder Höhe oder Breite bis zu den entsprechenden Abmessungen des Div zu füllen, kann ich nur an die Verwendung von Javascript denken. Möchten Sie das unbedingt erkunden?
OKW
1
Siehe auch
Mottie

Antworten:

189

Update 2016:

Moderne Browser verhalten sich viel besser. Sie müssen lediglich die Bildbreite auf 100% einstellen ( Demo ).

.container img {
   width: 100%;
}

Da Sie das Seitenverhältnis nicht kennen, müssen Sie einige Skripte verwenden. So würde ich es mit jQuery ( Demo ) machen:

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

Skript

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})
Mottie
quelle
Kann der Benutzer das Bild vor der Größenänderung sehen? Hat das jemand getestet?
RayLoveless
Die Lösung ist fast richtig, Sie müssen nur die Höhe und Breite im CSS umkehren: Wenn das Bild "hoch" ist, sollte die Breite 100% und nicht die Höhe sein (die größer und überfüllt sein wird). Umgekehrt für die breiten Fotos.
Britto
@mbritto: Sie haben Recht, ich musste das CSS auf maximale Breite / Höhe ändern und ich fügte eine Demo
Mottie
@ Mottie gibt es eine Möglichkeit, ein Bild mit einer Breite von 930 Pixel in einen Container mit einer Größe von 960 Pixel anzupassen, ohne die Bildqualität zu verlieren
Vivek Dragon
15
Warum ist das die akzeptierte Antwort? Die Frage ist, ob Bilder für ihren Container zu klein sind. dh wie kann ein Bild vergrößert werden, um die Breite oder Höhe seines Containers zu füllen, ohne das Seitenverhältnis des Bildes zu verfälschen. In Ihrer Demo wirkt sich das Entfernen der Eigenschaften width:autooder height:autonicht auf die Anzeige Ihrer Bilder aus. Tatsächlich hat von allen Eigenschaften, die Sie auf das Bild anwenden, nur max-width: 100%eine Auswirkung, und es wirkt sich nur auf das Landschaftsbild aus. Am wichtigsten ist jedoch, dass Ihre Antwort nicht dazu beiträgt, ein kleines Bild zu dehnen, um einen größeren Behälter zu füllen.
Matty
78

Es gibt einen viel einfacheren Weg, dies nur mit CSSund zu tun HTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Dadurch wird Ihr Bild als Hintergrund platziert und gedehnt, um es divohne Verzerrung an die Größe anzupassen.

Ryan
quelle
Ist dies mit einer undefinierten Anzahl von Bildern möglich?
TrtG
background-size: cover;ist die wahre Magie hier, und es ist CSS3, hat aber angemessene Browserunterstützung für die neuesten Versionen (siehe: w3schools.com/cssref/css3_pr_background-size.asp )
Jon Kloske
1
Es könnte sich lohnen, die Bild-URL in den HTML- <div style="background-image: url('path/to/image.jpg');" class="fill"></div>
Code aufzunehmen
background-size: cover Wenn das Seitenverhältnis nicht beibehalten wird, werden Teile des Bildes zugeschnitten, die nicht proportional zum Element sind. Siehe hier
Alex_Zhong
@Alex_Zhong, du verstehst das Seitenverhältnis falsch. Seitenverhältnis bedeutet, dass das Bild in keine Richtung gedehnt wird (sodass ein perfekter Kreis weder in der Breite noch in der Höhe zu einem Oval wird). Das Zuschneiden kann ein notwendiger Bestandteil der Aufrechterhaltung des Seitenverhältnisses sein (wie es im Anwendungsfall des OP der Fall ist).
Jeremy Moritz
70

Keine perfekte Lösung, aber dieses CSS könnte helfen. Durch den Zoom funktioniert dieser Code, und der Faktor sollte theoretisch unendlich sein, um ideal für kleine Bilder zu funktionieren - aber 2, 4 oder 8 funktionieren in den meisten Fällen einwandfrei.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}
Prouda
quelle
1
Ich wünschte, dies würde in Firefox funktionieren. Warum keine zoomLiebe von Firefox?
Matty
1
Firefox hat noch nicht zoomimplementiert, aber hier ist der Bug-Link als zukünftige Referenz: bugzilla.mozilla.org/show_bug.cgi?id=390936
Adam Taylor
31

Wenn Sie können, verwenden Sie Hintergrundbilder und stellen Sie ein background-size: cover. Dadurch wird der Hintergrund das gesamte Element abdecken.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Wenn Sie keine Inline-Bilder mehr verwenden möchten, stehen Ihnen einige Optionen zur Verfügung. Erstens gibt es

Objektanpassung

Diese Eigenschaft wirkt sich auf Bilder, Videos und andere ähnliche Objekte aus background-size: cover.

CSS

img {
  object-fit: cover;
}

Leider ist die Browserunterstützung nicht so gut, da der IE bis Version 11 sie überhaupt nicht unterstützt. Die nächste Option verwendet jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Benutzerdefiniertes jQuery-Plugin

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Verwenden Sie das Plugin wie folgt

jQuery('.cover-image').coverImage();

Es wird ein Bild aufgenommen, als Hintergrundbild auf dem Wrapper-Element des Bildes festgelegt und das entfernt img Tag aus dem Dokument. Zuletzt könnten Sie verwenden

Reines CSS

Sie können dies als Fallback verwenden. Das Bild wird vergrößert, um den Container abzudecken, aber nicht verkleinert.

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hoffe das könnte jemandem helfen, fröhliches Codieren!

Daniels
quelle
Ich suchte nach einer reinen CSS-Lösung, mit der Bilder einen bestimmten Container füllen können, ohne Hintergrundbild und Hintergrundgröße zu verwenden, und der CSS-Code hier funktioniert hervorragend für> = IE9 und moderne Browser. CodePen Demo hier
FLOQ Design
In Pure CSS habe ich entfernt min-und geändert width: 100%; height: 100%;und gearbeitet! tolle Lösung! +1 Danke!
Guilherme Nascimento
1
background-size: containist auch nützlich, wenn Sie möchten, dass keines der Bilder jemals abgeschnitten wird.
Ponkadoodle
Sie können zoom:0.001die Pure CSS-Lösung erweitern, um sie zu verkleinern.
Ivor Zhou
12

Update 2019.

Sie können jetzt die object-fitCSS-Eigenschaft verwenden, die die folgenden Werte akzeptiert:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Als Beispiel könnten Sie einen Container haben, der ein Bild enthält.

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

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
Ed Stennett
quelle
7

Das ist unmöglich mit nur HTML und CSS oder zumindest wild exotisch und kompliziert. Wenn Sie bereit sind, Javascript zu verwenden, finden Sie hier eine Lösung mit jQuery:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Dadurch wird die Größe des Bilds so geändert, dass es unabhängig von seiner Größe immer in das übergeordnete Element passt. Und wie es an die gebunden ist$(window).resize() Ereignis gebunden ist, wird das Bild angepasst, wenn der Benutzer die Fenstergröße ändert.

Dies versucht nicht, das Bild im Container zu zentrieren, das wäre möglich, aber ich denke, das ist nicht das, wonach Sie suchen.

Tatu Ulmanen
quelle
4
Ich nehme an, $ img.parent (); sollte wirklich $ i.parent () sein;
Jimbo Jonny
5

Stellen Sie die Breite und Höhe des äußeren containerBereichs ein. Verwenden Sie dann das folgende Styling für img:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

Dies hilft Ihnen dabei, ein Seitenverhältnis Ihres Bildes beizubehalten

Chintan Bhatt
quelle
6
es wird das div nicht füllen.
Sven van den Boogaart
5

Wenn Sie eine maximale Breite oder Höhe festlegen möchten (damit diese nicht sehr groß wird), während Sie das Seitenverhältnis der Bilder beibehalten, können Sie Folgendes tun:

img{
   object-fit: contain;
   max-height: 70px;
}
Bohao LI
quelle
4

Ich bin auf diese Frage gestoßen, als ich nach einem ähnlichen Problem gesucht habe. Ich erstelle eine Webseite mit ansprechendem Design und die Breite der auf der Seite platzierten Elemente wird auf einen Prozentsatz der Bildschirmbreite festgelegt. Die Höhe wird mit einem vw-Wert eingestellt.

Da ich Beiträge mit PHP und einem Datenbank-Backend hinzufüge, kam reines CSS nicht in Frage. Ich fand die jQuery / Javascript-Lösung jedoch etwas mühsam, so dass ich eine ordentliche (also denke ich mich zumindest) Lösung gefunden habe.

HTML (oder PHP)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

Durch die Verwendung von style = "" ist es möglich, dass PHP meine Seite dynamisch aktualisiert, und das CSS-Styling zusammen mit style = "" führt zu einem perfekt abgedeckten Bild, das so skaliert ist, dass es das dynamische div-Tag abdeckt.

Christian Jensen
quelle
4

Damit dieses Bild auf die maximal mögliche Größe gedehnt wird, ohne überzulaufen oder das Bild verzerrt.

Anwenden...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

Stile zum Bild.

ianbeans
quelle
3

Mit dieser Methode können Sie Ihr Div mit dem Bildvariationsverhältnis von Divs und Bildern füllen.

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}
user1994142
quelle
3

Das hat den Trick für mich getan

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
Entwickler_D
quelle
2

Wenn Sie mit IMG-Tags arbeiten, ist dies einfach.

Ich habe das gemacht:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

aber ich habe nicht gefunden, wie es mit #pic funktionieren soll {background: url (img / menu.png)} Enyone? Vielen Dank

aleXela
quelle
eine Änderung vorgenommen und eine Antwort auf mein Problem gefunden! Nein, es wird jemandem helfen. Hintergrundbild: URL (images / menu.png); Hintergrundwiederholung: keine Wiederholung; Position: absolut; Hintergrundgröße: 300px; Höhe: 100%; Breite: 100%; und Sie können den Wert der Hintergrundgröße mit Javascript oder jquery ändern (.attr ({'style': 'Hintergrundgröße: 150px auto; links: 50px; oben: 50px;'}))
aleXela
2

Ich hatte ein ähnliches Problem. Ich habe es nur mit CSS gelöst .

Grundsätzlich Object-fit: cover hilft es Ihnen, das Seitenverhältnis beizubehalten, während Sie ein Bild innerhalb eines Div positionieren.

Das Problem Object-fit: coverfunktionierte jedoch nicht im IE und es wurde 100% Breite und 100% Höhe benötigt, und das Seitenverhältnis war verzerrt. Mit anderen Worten, der Bildzoom-Effekt war nicht vorhanden, was ich in Chrom sah.

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.

Furqan Rahamath
quelle
1

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... und wenn Sie das Bild einstellen oder ändern möchten (am Beispiel von #foo):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
Patch92
quelle
1

Viele der hier gefundenen Lösungen weisen einige Einschränkungen auf: Einige funktionieren nicht im IE (Objektanpassung) oder in älteren Browsern, andere Lösungen skalieren die Bilder nicht (verkleinern sie nur), viele Lösungen unterstützen keine Größenänderung des Fensters und viele sind es nicht generisch, entweder feste Auflösung oder Layout (Hoch- oder Querformat) erwarten

Wenn die Verwendung von Javascript und JQuery kein Problem ist, habe ich diese Lösung basierend auf dem Code von @Tatu Ulmanen. Ich habe einige Probleme behoben und Code hinzugefügt, falls das Bild dinamisch geladen wird und zu Beginn nicht verfügbar ist. Grundsätzlich besteht die Idee darin, zwei verschiedene CSS-Regeln zu haben und diese bei Bedarf anzuwenden: eine, wenn die Begrenzung die Höhe ist, also müssen wir schwarze Balken an den Seiten anzeigen, und die CSS-Regel, wenn die Begrenzung die Breite ist, also müssen wir oben / unten schwarze Balken anzeigen.

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

Für ein HTML-Element wie:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/> 
jolumg
quelle