更改图像高度而不拉伸图像

Question

当我尝试缩小尺寸时，图像会被拉伸。

http://jsfiddle.net/QEpJH/878/

.container img {
    display: block;
    width: 100%;
    height: 60vh;
    /*object-fit: cover; // doesn't work in Internet Explorer */
}

Answer 1

您需要按1:1

进行扩展

所以使用
width: auto;代替width:100;。

或使用height: auto;和width: 100%;，以防您想要覆盖整个宽度。

但请记住，如果覆盖整个宽度，高度会增加。

Answer 2

如果将width设置为auto，图像会将自身调整到给定的高度而不进行任何拉伸。

.container img {
        display: block;
        width: auto;
        height: 60vh;
    }

Answer 3

仅按百分比尝试比率或使用类似比率

.container img {
   display: block;
   width: 30%;
   height: 30%;
   /*object-fit: cover; // doesn't work in Internet Explorer */
}

Answer 4

如果您将图像设置为背景而使用

background-size:cover

你将失去拉伸但是一些图像可能会被切断

稍微反击一下你可以使用

background-position

将图像定位在更理想的位置