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

【问题标题】：How can you scale a large image in responsive design with no height?如何在没有高度的响应式设计中缩放大图像？
【发布时间】：2017-11-09 12:39:32
【问题描述】：

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

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

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

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：