无法调整横向和纵向图像的图像高度

Question

我正在为一家地产代理商创建一个现有网站的响应版本。每个属性都有一个图像库，当图像是风景时，它可以很好地显示。问题在于它们是肖像。

在原始代码中，图像大小定义为：

#gallery-images {
  height: 577px;
  overflow: hidden;
  position: relative;
  width: 828px;
}

我正在覆盖它（使用媒体查询），因此它变为

#gallery-images {
  height: 205px !important;
  left: 1px;
  width: 290px;
  }

但是，这意味着纵向图像从顶部裁剪，导致显示效果不佳 - see here for example。

如果我设置height:auto和overflow:visible人像图像显示正常，但会对页面高度产生负面影响。本质上，画廊导航保持在原位，但是当再次显示风景图像时，上方有很多空白区域。

一种选择是将图库导航移动到图像上方并遭受下面的空白区域，但我想知道是否还有另一种我没有想到的解决方案。我对可以进行的非CSS更改有所限制，但如果脚本可以提供更好的解决方案，也许可以说服客户端添加一些内容。

Answer 1

如果您想要显示溢出或不显示，请由您决定，但我认为您正在寻找声明最小宽度......如果您将高度关闭，则图像将按比例缩放。