相同高度的响应图像保持其比率

Question

我面临一个似乎没有得到解决的问题，除非我没有找到答案（它不在“可能已经有你答案的问题”中，我也没有找到它的网站）。

所以这是我的问题： 我有多个图像从不相同的高度/宽度，但我希望它们以相同的方面显示并保持它们的比例。 具体而言，我要尊重的是：

• 相同的高度/宽度
• 相同比例（不变形）
• 的响应
• 完全填充容器
• 裁剪为完全填充
• 的中心

喜欢这样，但在响应中：

以下是我现在发现的一个小提琴： my excavation

CSS：

这是为了保持相同的比例。

height: 50%;
width: auto;

这只是我想要的尺寸（但这不是响应！）

   position: relative ;
    float: left;
    height:200px;
    width:200px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

我对所有解决方案持开放态度; jQuery也是。

Answer 1

这是在前端开发中经常发生的问题。理想情况下，我们应该使用具有完全相同大小的图像，以使宽高比保持不变。

当图像有高度时，我们需要以某种方式裁剪图像，使它们具有相同的高度。

以下是您可以执行的jsFiddle示例。

.image-wrap {
   overflow: hidden;
   height: 0;
   padding-bottom: 50%;
}
.image-wrap img {
   max-width: 100%;
}

将图像包裹在overflow: hidden的div中，并使用填充底部来定义图像的高度。

Answer 2

Bootstrap一直在为你的“.container”元素添加CSS。 这是我通过覆盖代码中的一些元素得到的：

.container {
    border: 1px solid black;
    height: 81pt;
    overflow: hidden;
    padding:0px;
}
.productImage {
    max-width: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
img {
    vertical-align: baseline;
}

Here is your updated code on JSFiddle