html - 照片和标题布局问题

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;
}