How do you stretch an image to fill a while

问题:

I need to make this image stretch to the maximum size possible without overflowing it\'s <div> or skewing the image.

I can\'t predict the aspect-ratio of the image, so there\'s no way to know whether to use:

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

or

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

I can\'t use both (i.e. style=\"width: 100%; height: 100%;\") because that will stretch the image to fit the <div>.

The <div> has a size set by percentage of the screen, which is also unpredictable.

回答1:

Update 2016:

Modern browser behave much better. All you should need to do is to set the image width to 100% (demo)

.container img {
   width: 100%;
}

---

Since you don\'t know the aspect ratio, you\'ll have to use some scripting. Here is how I would do it with 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=\"http://i48.tinypic.com/wrltuc.jpg\" />
</div>
<br />
<br />
<div class=\"container\">
 <img src=\"http://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);
 })
})

回答2:

Not a perfect solution, but this CSS might help. The zoom is what makes this code work, and the factor should theoretically be infinite to work ideally for small images - but 2, 4, or 8 works fine in most cases.

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

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

回答3:

There is a much easier way to do this using only CSS and HTML:

HTML:

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

CSS:

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

This will place your image as the background, and stretch it to fit the div size without distortion.

回答4:

If you can, use background images and set background-size: cover. This will make the background cover the whole element.

CSS

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

If you\'re stuck with using inline images there are a few options. First, there is

object-fit

This property acts on images, videos and other objects similar to background-size: cover.

CSS

img {
  object-fit: cover;
}

Sadly, browser support is not that great with IE up to version 11 not supporting it at all. The next option uses jQuery

CSS + jQuery

HTML

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

CSS

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

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

Use the plugin like this

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

It will take an image, set it as a background image on the image\'s wrapper element and remove the img tag from the document. Lastly you could use

Pure CSS

You might use this as a fallback. The image will scale up to cover it\'s container but it won\'t scale down.

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

Hope this might help somebody, happy coding!

回答5:

Thanks to CSS3

img
{
   object-fit: contain;
}

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

IE and EDGE as always outsiders: http://caniuse.com/#feat=object-fit

回答6:

That\'s impossible with just HTML and CSS, or at least wildly exotic and complicated. If you\'re willing to throw some javascript in, here\'s a solution using 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();
});

That will resize the image so that it will always fit inside the parent element, regardless of it\'s size. And as it\'s binded to the $(window).resize() event, when user resizes the window, the image will adjust.

This does not try to center the image in the container, that would be possible but I guess that\'s not what you\'re after.

回答7:

Set width and height of the outer container div. Then use below styling on img:

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

This will help you to keep an aspect ratio of your img

回答8:

I came across this question searching for a simular problem. I\'m making a webpage with responsive design and the width of elements placed on the page is set to a percent of the screen width. The height is set with a vw value.

Since I\'m adding posts with PHP and a database backend, pure CSS was out of the question. I did however find the jQuery/javascript solution a bit troblesome, so I came up with a neat (so I think myself at least) solution.

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

By using style=\"\" it\'s posible to have PHP update my page dynamically and the CSS-styling together with style=\"\" will end up in a perfectly covered image, scaled to cover the dynamic div-tag.

回答9:

Using this method you can fill in your div with the image varying ratio of divs and images.

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

回答10:

This did the trick for me

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

回答11:

You can use object-fit: cover; on the parent div.

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

回答12:

To make this image stretch to the maximum size possible without overflowing it\'s or skewing the image.

Apply...

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

styles to the image.

回答13:

if you working with IMG tag, it\'s easy.

I made this:

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

but i didn\'t find how to make it work with #pic { background:url(img/menu.png)} Enyone? Thanks

回答14:

If you want to set a max width or height (so that it will not be very large) while keeping the images aspect-ratio, you can do this:

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

回答15:

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

...And if you want to set or change the image (using #foo as an example):

jQuery:

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

JavaScript:

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

回答16:

Many of the solutions found here have some limitation: some not working in IE ( object-fit) or older browsers, other solutions do not scale up the images (only shrink it), many solution do not support resize of the window and many are not generic, either expect fix resolution or layout(portrait or landscape)

If using javascript and jquery is not a problem I have this solution based on the code of @Tatu Ulmanen. I fixed some issues, and added some code in case the image is loaded dinamically and not available at begining. Basically the idea is to have two different css rules and apply them when required: one when the limitation is the height, so we need to show black bars at the sides, and othe css rule when the limitation is the width, so we need to show black bars at the top/bottom.

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

For an HTML element like:

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