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。将图像设置为周围background-image的{{1}}不是一个选项，因为之后jQuery插件需要div。

Answer 1

<强> - 编辑 -

查看此更新的小提琴：http://jsfiddle.net/2HjcV/3/ 这使用了background-size:contain。有关此内容的更多信息，请访问：https://developer.mozilla.org/en-US/docs/CSS/background-size

OP，

尝试将保存图片的<div class="span6">移动到保存文字的<div class="span6">。

Fiddle updated here

Answer 2

简单地说，只有你想通过浏览器做一些事情，这对CSS来说是不可能的。你有一个流畅的布局，我相信默认情况下bootstrap有img at max-width的css规则：100％强制它被其父容器绑定并尊重宽高比。您将需要Javascript来知道文本div的高度并动态地将该高度添加到图像，或者将它们包装在具有固定高度的父容器中并对图像应用max-height：100％并溢出：滚动或隐藏在div上。希望能帮助到你，干杯

Bootstrap：强制图像高度为行高

2 个答案: