在保持图像纵横比的同时，如何拉伸图像以填充<div>？
我需要使这个图像伸展到可能的最大尺寸，而不会溢出它的<div>或倾斜图像。
我无法预测图像的纵横比，所以无法知道是否使用：
<img src="url" style=" width : 100%;">
要么
<img src="url" style=" height : 100%;">
我不能同时使用（即风格=“宽度：100％;高度：100％;”），因为这将拉伸图像适合<div> 。
<div>的大小由屏幕的百分比设置，这也是不可预知的。
2016年更新：
现代浏览器的performance要好得多。 所有你需要做的就是将图像宽度设置为100％（ 演示 ）
.container img { width: 100%; }
既然你不知道宽高比，你将不得不使用一些脚本。 下面是我将如何使用jQuery（ 演示 ）：
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>
脚本
$(window).load(function(){ $('.container').find('img').each(function(){ var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall'; $(this).addClass(imgClass); }) })
不是一个完美的解决scheme，但是这个CSS可能有帮助 缩放是使这个代码工作的原因，理论上这个因素应该是无限的，对于小图像理想的工作 – 但是2,4,8在大多数情况下工作正常。
#myImage { zoom: 2; //increase if you have very small images display: block; margin: auto; height: auto; max-height: 100%; width: auto; max-width: 100%; }
有一个更容易的方法来做到这一点只使用CSS和HTML ：
HTML：
<div class="fill"></div>
CSS：
.fill { overflow: hidden; background-size: cover; background-position: center; background-image: url('path/to/image.jpg'); }
这将把您的图像作为背景，并将其拉伸以适应div尺寸而不失真。
如果可以的话，使用背景图片并设置background-size: cover 。 这将使背景覆盖整个元素。
CSS
div { background-image: url(path/to/your/image.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
如果您使用内嵌图片卡住，有几个选项。 首先，有
对象的合
此属性对图像，video和类似于background-size: cover其他对象起作用background-size: cover 。
CSS
img { object-fit: cover; }
不幸的是，IE浏览器到11版本不支持浏览器支持 。 下一个选项使用jQuery
CSS + jQuery
HTML
<div> <img src="image.png" class="cover-image"> </div>
CSS
div { height: 8em; width: 15em; }
自定义jQuery插件
(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);
使用像这样的插件
jQuery('.cover-image').coverImage();
它将拍摄一张图像，将其设置为图像包装元素上的背景图像，并从文档中移除img标签。 最后你可以使用
纯粹的CSS
你可以用这个作为后备。 该图像将扩大到涵盖它的容器，但不会缩小。
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%); }
希望这可以帮助别人，快乐的编码！
感谢CSS3
img { object-fit: contain; }
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
IE和EDGE一如既往的局外人： http : //caniuse.com/#feat=object-fit
这仅仅是HTML和CSS所不可或缺的，至less是非常奇特而复杂的。 如果你愿意抛出一些JavaScript，这里是一个使用jQuery的解决scheme：
$(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(); });
这将调整图像大小，使其始终适合父元素，而不pipe它的大小。 而且，当它绑定到$(window).resize()事件时，当用户调整窗口大小时，图像将会调整。
这不会尝试将图像放在容器中，这是可能的，但我想这不是你所追求的。
设置外部container div的宽度和高度。 然后在img上使用下面的样式：
.container img{ width:100%; height:auto; max-height:100%; }
这将帮助你保持你的img的纵横比
我遇到了这个问题寻找一个相似的问题。 我正在制作一个具有响应式devise的网页，页面上放置的元素宽度设置为屏幕宽度的百分比。 高度设置为一个vw值。
由于我添加了PHP和数据库后端的post，纯CSS是不可能的。 但是，我发现jQuery / JavaScript解决scheme有点麻烦，所以我想出了一个整洁的（所以我认为我自己至less）解决scheme。
HTML（或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>
使用这种方法，你可以用div和图像的不同比例来填充你的div。
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="..http://img.dovov.commyimg.jpg" /> </div>
CSS：
.fillme{ overflow:hidden; } .fillme img.stretchx{ height:auto; width:100%; } .fillme img.stretchy{ height:100%; width:auto; }
如果你使用IMG标签，这很容易。
我做的：
<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;' }) )}
但我没有find如何使它与#pic {background：url（img / menu.png）} Enyone？ 谢谢
这为我做了诡计
div img { width: 100%; min-height: 500px; width: 100vw; height: 100vh; object-fit: cover; }
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
…如果你想设置或改变图像（以#foo为例）：
jQuery的：
$("#foo").css("background-image", "url('path/to/image.png')");
JavaScript的：
document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
你可以使用object-fit: cover; 在父div上。
