我正在处理图像，我遇到了纵横比问题。
<img src="big_image.jpg" width="900" height="600" alt="" />
如您所见，高度和宽度已经指定。我为图像添加了CSS规则：
img {
max-width: 500px;
}
但对于big_image.jpg，我得到的宽度=500，高度=600。如何设置图像的大小，同时保持其纵横比。
当前回答
要保持响应图像，同时仍然强制图像具有一定的纵横比，可以执行以下操作：
HTML格式：
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>
和SCSS：
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
无论作者上传的图像大小如何，这都可以用于强制执行特定的纵横比。
感谢@Ksesohttp://codepen.io/Kseso/pen/bfdhg.查看此URL以了解更多比率和工作示例。
其他回答
这里有一个解决方案：
object-fit: cover;
width: 100%;
height: 250px;
您可以调整宽度和高度以满足您的需要，对象拟合属性将为您进行裁剪。
有关对象拟合属性和兼容性表的可能值的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
只需将此添加到css中，它将自动收缩和扩展，并保持原始比例。
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
这里有一个解决方案：
img {
width: 100%;
height: auto;
object-fit: cover;
}
这将确保图像始终覆盖整个父对象（向下和向上缩放）并保持相同的纵横比。
您可以创建如下div：
<div class="image" style="background-image:url('/to/your/image')"></div>
并使用此css设置其样式：
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover
与这里的一些答案非常相似，但在我的案例中，我的图像有时更高，有时更大。
这种风格就像一种魅力，确保所有图像都使用所有可用空间，保持比例而不是剪切：
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
