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.

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

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.

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

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!

Dank 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

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;

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.

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

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

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.

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

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

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.

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

Das hat den Trick für mich getan

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

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

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.

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

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