image - 如何在没有高度的响应式设计中缩放大图像？

Question

对于我的网站，这是我在响应式设计方面使用的图像：

 .logo {
 max-width: 100%;
 display: block;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 }

图像在宽度方面正确缩放，但图像的高度太大。在这种情况下，如何才能使图像正确缩放？如果我删除自动高度并指定 70 像素，则在完整版中查看时图像看起来不错，但是当您开始缩小浏览器的大小时，图像看起来会向内移动。

我怎样才能解决这个问题？

Answer 1

尝试这个：

{
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

Answer 2

为此，在 img 周围包裹一个 div 并应用您想要的高度并溢出隐藏它

.imgwrapp {width:100%;height:70px;overflow:hidden;float:left}

Answer 3

因此，鉴于您在那里的 css，图像的宽度与高度之比就是给您带来问题的原因。如果您不喜欢浏览器宽时图像的高度，那么您可能应该获得不同的图像/裁剪它。当您将高度设置为 70px 时，您正在做的是强制图像进入一个它不适合的框，因此图像看起来很有趣，因为它被缩放得很奇怪。

但很遗憾，还有另一种选择。这是一个 jsfiddle，它仅显示适合我的前 n 个像素（在您的情况下为 70）内的图像数量，这样它就会滑出视图。在此处检查 css：

.header {
width: 100%;
height: 100px;
overflow:hidden;
}
.everythingelse {
width: 100%;
height: 200px;
}