我需要使这张图像拉伸到最大尺寸，而不溢出它的<div>或倾斜图像。
我无法预测图像的纵横比，所以没有办法知道是否使用:
<img src="url" style="width: 100%;">or
<img src="url" style="height: 100%;">我不能同时使用(即style="width: 100%;高度:100%;")，因为这将拉伸图像以适应<div>。
<div>的大小由屏幕的百分比设置，这也是不可预测的。
当前回答
感谢CSS3
img
{
object-fit: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
IE和EDGE始终是局外人: http://caniuse.com/#feat=object-fit
其他回答
有一个更简单的方法，只使用CSS和HTML:
HTML:
<div
class="fill"
style="background-image: url('path/to/image.jpg');">
</div>
CSS:
.fill {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
这将把你的图像作为背景，并拉伸它以适应div的大小而不失真。
要使此图像拉伸到最大可能的大小，而不会溢出或倾斜图像。
应用……
img {
object-fit: cover;
height: -webkit-fill-available;
}
图像的样式。
这对于HTML和CSS来说是不可能的，或者至少是非常奇特和复杂的。如果你愿意加入一些javascript，这里有一个使用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();
});
这将调整图像的大小，使其始终适合于父元素，不管它的大小如何。由于它被绑定到$(window).resize()事件，当用户调整窗口大小时，图像将会调整。
这并没有试图在容器中居中图像，这是可能的，但我猜这不是你想要的。
如果你使用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;' })
)}
但我不知道如何使它与#pic {background:url(img/menu.png)}一起工作 Enyone吗? 谢谢
2016年更新:
现代浏览器的表现要好得多。你所需要做的就是将图像宽度设置为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);
})
})
