我需要使这张图像拉伸到最大尺寸，而不溢出它的<div>或倾斜图像。
我无法预测图像的纵横比，所以没有办法知道是否使用:
<img src="url" style="width: 100%;">or
<img src="url" style="height: 100%;">我不能同时使用(即style="width: 100%;高度:100%;")，因为这将拉伸图像以适应<div>。
<div>的大小由屏幕的百分比设置，这也是不可预测的。
当前回答
我在寻找一个类似的问题时遇到了这个问题。我正在制作一个响应式设计的网页，页面上放置的元素的宽度设置为屏幕宽度的百分比。高度用vw值设置。
因为我用PHP和数据库后端添加了帖子，纯CSS是不可能的。然而，我确实发现jQuery/javascript的解决方案有点麻烦，所以我想出了一个整洁的解决方案(至少我是这么认为的)。
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>
通过使用style=""，可以让PHP动态更新我的页面，css样式和style=""将最终在一个完美覆盖的图像中结束，缩放以覆盖动态div标签。
其他回答
有一个更简单的方法，只使用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的大小而不失真。
如果你能够将图像设置为背景图像，那么你可以这样做，这将裁剪图像而不拉伸它:
<div style="background-image: url(...); background-size: cover; width: 100%; height: 100%;"></div>
如果你需要坚持使用<img>标签，那么从2019年开始，你现在可以使用对象适合css属性，它接受以下值: 填充|包含|覆盖|无|缩小
参见https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
举个例子，你可以有一个存放图像的容器:
<div class="container">
<img src="" class="container_img" />
</div>
.container {
height: 50px;
width: 50%;
}
.container_img {
height: 100%;
width: 100%;
object-fit: cover;
}
使用这种方法，你可以在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="../images/myimg.jpg" />
</div>
CSS:
.fillme{
overflow:hidden;
}
.fillme img.stretchx{
height:auto;
width:100%;
}
.fillme img.stretchy{
height:100%;
width:auto;
}
感谢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来说是不可能的，或者至少是非常奇特和复杂的。如果你愿意加入一些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()事件，当用户调整窗口大小时，图像将会调整。
这并没有试图在容器中居中图像，这是可能的，但我猜这不是你想要的。
