照片＆amp;标题布局问题

Question

在狭窄的浏览器窗口中显示this page时，在页面底部显示照片标题会出现问题，例如

如您所见，标题超出了照片的右侧。理想情况下，我希望照片的宽度与标题的宽度相同，但是使标题更窄以匹配照片的宽度也是可以接受的。

单张照片和标题的标记是

<div class="four columns">
  <div class="ft-work">
    <img src="images/slider/mum-daughter.jpg">
    <div class="ft-work-title text-center">
      <h5 class="alt-h">Caption??</h5>
    </div>
  </div>
</div>

我发现如果删除此规则

#featured-work-slider img {
  width: auto !important;
}

照片的宽度与标题相匹配，但图像看起来非常拉伸。

Answer 1

我在样式表中看到了这条规则：

#featured-work-slider img {
    display: inline-block !important;
    width: auto !important;
}

将它切换为以下功能对我来说（适用于移动和桌面尺寸）。

#featured-work-slider img {
    display: inline-block !important;
    width: 100%;
    height: auto;
}

Answer 2

正如您所提到的，请从移动版面中的图片中移除width: auto !important;。然后添加此项以使宽高比正确：height: 100%;