Bootstrap图像显示不同的宽高比？

Question

我有一个图像，图像被保存为宽度 400 像素和高度 400 像素，所以它是一个方形图像。

在我的 html 页面上，我希望它被挤压 400 像素宽度和 200 像素高度，但仍然响应。

我应该如何使用引导程序执行此操作？

我不想创建所有新图像。在这种情况下，重新保存为 400px X 200px

通常我会在img上设置宽度和高度

<img src="<%= ResolveUrl("images/Organisations_Summary.png" class="img-responsive img-rounded center-block" />

谢谢

Answer 1

您应该将高度设置为 50%，如果您希望宽度最多为 400 像素（最宽的屏幕尺寸），您需要添加一个最大宽度：

CSS

img{
    height:50%;
    max-width:450px;
}