2

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

标记基本上如下：

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

我的意图如下： 应减小图像的大小，使其与包含文本的列一样高。请参阅此jsfiddle进行说明。

有没有办法只用 CSS 来实现这一点？据我所知，object-fitCSS3 命令将是我所需要的，但不幸的是它没有得到很好的支持（还没有？），请参阅caniuse。将图像设置为background-image周围环境div不是一种选择，因为img之后 jQuery 插件需要它。

4

2 回答 2

0

-编辑-

请参阅此更新的小提琴：http: //jsfiddle.net/2HjcV/3/ 它使用background-size:contain. 更多信息在这里：https ://developer.mozilla.org/en-US/docs/CSS/background-size

操作，

尝试将<div class="span6">保存图像的<div class="span6">内容移动到保存文本的内容中。

小提琴在这里更新

于 2013-03-14T01:01:14.980 回答
0

简单地说，不，至少如果你想跨浏览器做一些事情，CSS 是不可能的。您有一个流畅的布局，我相信默认情况下，引导程序在最大宽度处具有 img 的 css 规则：100% 强制它受其父容器的约束并尊重纵横比。您将需要 Javascript 来了解文本 div 的高度并将该高度动态添加到图像中，或者将它们都包装在具有固定高度的父容器中并在图像上应用 max-height: 100% 并溢出：滚动或隐藏在 div 上。希望有帮助，加油

于 2013-03-14T05:29:19.257 回答