it-swarm.com.de

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

Ich muss dieses Bild auf die maximal mögliche Größe strecken, ohne dass es überläuft (<div>) Oder das Bild verzerrt.

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

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

oder

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

Ich kann nicht beide verwenden (d. H. Style = "width: 100%; height: 100%;"), da dadurch das Bild gestreckt wird, damit es auf <div> Passt.

Der <div> Hat eine prozentuale Bildschirmgröße, die ebenfalls nicht vorhersehbar ist.

185
Giffyguy

Update 2016:

Moderne Browser verhalten sich viel besser. Sie müssen lediglich die Bildbreite auf 100% setzen ( 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);
 })
})
177
Mottie

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

HTML:

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

CSS:

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

Dadurch wird das Bild als Hintergrund platziert und gestreckt, um es ohne Verzerrung an die Größe von div anzupassen.

70
Ryan

Keine perfekte Lösung, aber dieses CSS könnte helfen. Der Zoom bewirkt, dass dieser Code funktioniert, 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%;
}
69
Prouda

Verwenden Sie nach Möglichkeit Hintergrundbilder und setzen Sie 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 mit Inline-Bildern nicht weiterkommen, gibt es einige Optionen. Erstens gibt es

Objektanpassung

Diese Eigenschaft wirkt sich auf Bilder, Videos und andere Objekte aus, die background-size: cover Ähneln.

CSS

img {
  object-fit: cover;
}

Leider ist Browser-Unterstützung nicht so toll, wenn IE bis Version 11 überhaupt nicht unterstützt wird. Die nächste Option verwendet jQuery

CSS + jQuery

HTML

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

CSS

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

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

Benutze das Plugin so

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

Es wird ein Bild aufgenommen, als Hintergrundbild für das Deckblattelement des Bildes festgelegt und das Tag img aus dem Dokument entfernt. Zu guter Letzt könntest du verwenden

Reines CSS

Sie können dies als Fallback verwenden. Das Bild wird vergrößert, um den Container zu bedecken, 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 Programmieren!

29
daniels

Vielen Dank an CSS3

img
{
   object-fit: contain;
}

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

IE und Edge wie immer Außenseiter: http://caniuse.com/#feat=object-fit

13
It_Never_Works

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 Bildes so geändert, dass es unabhängig von seiner Größe immer in das übergeordnete Element passt. Und da es an das Ereignis $(window).resize() gebunden ist, wird das Bild angepasst, wenn der Benutzer die Größe des Fensters ä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.

6
Tatu Ulmanen

Stellen Sie Breite und Höhe des äußeren container div ein. Dann benutze das folgende Styling auf img:

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

Auf diese Weise können Sie das Seitenverhältnis Ihres Bilds beibehalten

5
Chintan Bhatt

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 Posts mit PHP und einem Datenbank-Backend hinzufüge, kam reines CSS nicht in Frage. Die jQuery/Javascript-Lösung fand ich jedoch etwas mühsam, weshalb ich mir eine ordentliche einfallen ließ (also denke ich mir zumindest) lösung.

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>

Wenn Sie style = "" verwenden, ist es möglich, PHP= meine Seite dynamisch zu aktualisieren, und das CSS-Styling zusammen mit style = "" ergibt ein perfekt verdecktes Bild, das so skaliert ist, dass es den dynamischen Teil abdeckt -Etikett.

4

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

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

Sie können object-fit: cover; auf dem übergeordneten div.

https://css-tricks.com/almanac/properties/o/object-fit/

3
Amrit Anandh

Mit dieser Methode können Sie Ihr Div mit einem unterschiedlichen Verhältnis von Divs und Bildern ausfü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;
}
3
user1994142

Damit dieses Bild auf die maximal mögliche Größe gedehnt wird, ohne dass es überläuft oder das Bild verzerrt wird.

Anwenden...

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

stile zum Bild.

3
ianbeans

Das hat den Trick für mich getan

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
3
Developer_D

Update 2019.

Sie können jetzt das object-fit CSS-Eigenschaft, 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;
2
Ed Stennett

wenn Sie mit IMG-Tags arbeiten, ist das ganz 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 herausgefunden, wie ich es mit #pic {background: url (img/menu.png)} zum Laufen bringen kann. Vielen Dank

2
aleXela

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')";
1
Patch92

Viele der hier gefundenen Lösungen weisen einige Einschränkungen auf: Einige funktionieren nicht in IE (Objektanpassung) oder älteren Browsern, andere Lösungen skalieren die Bilder nicht (verkleinern sie nur), viele Lösungen tun dies Keine Unterstützung für die Größenänderung des Fensters und viele sind nicht generisch. Erwarten Sie entweder eine feste Auflösung oder ein festes Layout (Hoch- oder Querformat).

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 dynamisch 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 eine andere CSS-Regel, wenn die Begrenzung die Breite ist, also müssen wir Zeige schwarze Balken oben/unten.

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"/> 
1
jolumg

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

Grundsätzlich gilt Object-fit: cover hilft Ihnen dabei, das Seitenverhältnis beizubehalten, während Sie ein Bild in einem Div positionieren.

Aber das Problem war Object-fit: cover funktionierte nicht in IE und es wurden 100% Breite und 100% Höhe und Seitenverhältnis verzerrt. Mit anderen Worten, der Bildzoomeffekt war nicht da, den ich in Chrom sah.

Der Ansatz, den ich gewählt habe, war, das Bild mit absolut in den Container zu platzieren und es dann genau in der Mitte zu platzieren unter Verwendung der Kombination:

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 „Objektanpassung: Deckung“.


Hier ist eine Demonstration der obigen Logik.

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

Diese Logik funktioniert in allen Browsern.