html - Bootstrap : force image height to height of row

Question

我有一个页面布局，其中两个 div 在一行中彼此相邻对齐。一列包含可变长度的文本，第二列包含图像。

标记基本上如下:

<div class="row-fluid">
   <div class="span6">
      <img src="picture.png">
   </div>
   <div class="span6">
     text<br>text
   </div>
</div>

我的意图如下:应缩小图像的大小，使其与包含文本的列一样高。看这个jsfiddle澄清。

有什么方法可以只用 CSS 实现吗？据我所知，object-fit CSS3 命令将是我所需要的，但不幸的是它还没有得到很好的支持(还没有？)，请参阅 caniuse .将图像设置为周围 div 的 background-image 不是一个选项，因为之后的 jQuery 插件需要 img。

Answer 1

简而言之，不，这仅在您想要跨浏览器执行某些操作时才使用 CSS 是不可能的。你有一个流畅的布局，我相信默认情况下 Bootstrap 有 img 的 css 规则 max-width: 100% 强制它受其父容器的约束并尊重纵横比。您将需要 Javascript 知道文本 div 的高度并将该高度动态添加到图像中，或者将它们都包装在具有固定高度的父容器中并应用 max-height: 100% 在图像上和 overflow: scroll or hidden在分区上。希望能帮助到你，干杯