我需要使这张图像拉伸到最大尺寸,而不溢出它的<div>或倾斜图像。

我无法预测图像的纵横比,所以没有办法知道是否使用:

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

or

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

我不能同时使用(即style="width: 100%;高度:100%;"),因为这将拉伸图像以适应<div>。

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

其他回答

有一个更简单的方法,只使用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 img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

如果你能够将图像设置为背景图像,那么你可以这样做,这将裁剪图像而不拉伸它:

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

感谢CSS3

img
{
   object-fit: contain;
}

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

IE和EDGE始终是局外人: http://caniuse.com/#feat=object-fit

你可以用object-fit: cover;在父div上。

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