Ik moet ervoor zorgen dat deze afbeelding zo groot mogelijk wordt uitgerekt zonder de <div>te overlopen of de afbeelding scheef te trekken.

Ik kan de hoogte-breedteverhouding van de afbeelding niet voorspellen, dus ik weet niet of ik het volgende moet gebruiken:

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

of

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

Ik kan niet beide gebruiken (d.w.z. style=”width: 100%; height: 100%;”) omdat de afbeelding dan wordt uitgerekt zodat deze past in de <div>.

De <div>heeft een grootte die is ingesteld op percentage van het scherm, wat ook onvoorspelbaar is.

Antwoord 1, autoriteit 100%

Bijwerken 2019.

U kunt nu de css-eigenschap object-fitgebruiken die de volgende waarden accepteert: fill | contain | cover | none | scale-down

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

U kunt bijvoorbeeld een container hebben die een afbeelding bevat:

<div class="container">
    <img src="" class="container_img" />
</div>
.container {
    height: 50px;
    width: 50%;
}
.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

Antwoord 2, autoriteit 94%

Update 2016:

Moderne browsers gedragen zich veel beter. Het enige dat u hoeft te doen, is de afbeeldingsbreedte in te stellen op 100% (demo)

.container img {
   width: 100%;
}

Omdat je de beeldverhouding niet kent, moet je wat scripting gebruiken. Hier is hoe ik het zou doen met jQuery (demo):

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="https://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="https://i47.tinypic.com/i1bek8.jpg" />
</div>

Script

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

Antwoord 3, autoriteit 97%

Er is een veel eenvoudigere manier om dit te doen door alleen CSSen HTMLte gebruiken:

HTML:

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

CSS:

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

Hiermee wordt uw afbeelding als achtergrond geplaatst en strekt u het uit om de divformaat zonder vervorming in te passen.

Antwoord 4, Autoriteit 195%

Geen perfecte oplossing, maar deze CSS kan helpen. De zoomen is wat deze code werkt, en de factor moet theoretisch oneindig zijn om te werken ideaal voor kleine afbeeldingen – maar 2, 4 of 8 werkt prima in de meeste gevallen.

#myImage {
    zoom: 2;  //increase if you have very small images
    display: block;
    margin: auto;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

Antwoord 5, Autoriteit 97%

Als u kunt, gebruikt u achtergrondafbeeldingen en stelt u background-size: cover. Dit zal de achtergrond het hele element bedekken.

CSS

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

Als u vastzit bij het gebruik van inline afbeeldingen zijn er een paar opties. Ten eerste is er

object-fit

Deze eigenschap werkt op afbeeldingen, video’s en andere objecten vergelijkbaar met background-size: cover.

CSS

img {
  object-fit: cover;
}

Helaas, Browser-ondersteuning is niet zo geweldig met IE tot versie 11 die het helemaal niet ondersteunt. De volgende optie gebruikt jQuery

CSS + JQUQUERY

HTML

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

CSS

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

Aangepaste jQuery-plug-in

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

Gebruik de plug-in als volgt

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

Er zal een afbeelding nodig zijn, deze wordt ingesteld als achtergrondafbeelding op het wrapper-element van de afbeelding en de tag imgwordt uit het document verwijderd. Als laatste zou je

. kunnen gebruiken

Pure CSS

U kunt dit als reserve gebruiken. De afbeelding wordt opgeschaald om de container te bedekken, maar niet kleiner.

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

Ik hoop dat dit iemand kan helpen, veel plezier met coderen!

Antwoord 6, autoriteit 51%

Dankzij CSS3

img
{
   object-fit: contain;
}

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

IE en EDGE zoals altijd buitenstaanders:
http://caniuse.com/#feat=object-fit

Antwoord 7, autoriteit 19%

Dat is onmogelijk met alleen HTML en CSS, of op zijn minst extreem exotisch en gecompliceerd. Als je bereid bent om wat javascript erin te gooien, is hier een oplossing met 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();
});

Dat zal de grootte van de afbeelding wijzigen, zodat deze altijd in het bovenliggende element past, ongeacht de grootte. En aangezien het gebonden is aan de gebeurtenis $(window).resize(), zal de afbeelding zich aanpassen wanneer de gebruiker het formaat van het venster aanpast.

Hiermee wordt niet geprobeerd de afbeelding in de container te centreren, dat zou mogelijk zijn, maar ik denk dat dat niet is wat u zoekt.

Antwoord 8, autoriteit 16%

U kunt object-fit: cover;gebruiken op de bovenliggende div.

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

Antwoord 9, autoriteit 14%

Als u een maximale breedte of hoogte wilt instellen (zodat deze niet erg groot zal zijn) terwijl u de beeldverhouding van de afbeeldingen behoudt, kunt u dit doen:

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

Antwoord 10, autoriteit 11%

Stel de breedte en hoogte in van de buitenste containerdiv. Gebruik dan onderstaande styling op img:

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

Dit zal je helpen om een beeldverhouding van je img te behouden

Antwoord 11, autoriteit 11%

Ik kwam deze vraag tegen toen ik op zoek was naar een soortgelijk probleem. Ik maak een webpagina met responsive design en de breedte van de elementen die op de pagina worden geplaatst is ingesteld op een percentage van de schermbreedte. De hoogte wordt ingesteld met een vw-waarde.

Aangezien ik berichten toevoeg met PHP en een database-backend, was pure CSS uitgesloten. Ik vond de jQuery/javascript-oplossing echter een beetje lastig, dus kwam ik met een nette (ik denk mezelf tenminste) oplossing.

HTML (of 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>

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

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

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

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

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

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

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

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

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

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

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

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

<div class="container"></div>

.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}