Question

我的设计是由两个块组成的行。

<div class="homepageBlockRow">
   <div class="homepageBlock">
      <img src="http://s1059327.instanturl.net/images/HomeTiles/BigJob.jpg" alt="">
   </div>
   <div class="homepageBlock homepageBlockText orangeBackground" style="height: 372px;">
    ...
   </div>
   <div style="clear: both;"></div>
</div>
<div class="homepageBlockRow">
   <div class="homepageBlock homepageBlockText greyBackground" style="height: 372px;">
      ...
   </div>
   <div class="homepageBlock">
      <img src="http://s1059327.instanturl.net/images/HomeTiles/Rental.jpg" alt="">
   </div>
   <div style="clear: both;"></div>
</div>

在全尺寸显示器上页面看起来不错，但在平板电脑分辨率下，图像大约是文本块的一半高度。

我尝试按比例缩放文本块以匹配行高，但是当图像较小时，这不起作用。

什么是扩展事物的好方法，以便图像和文本总是相同的高度？

Answer 1

CSS3具有可以实现此目的的对象适配属性（同时保留纵横比）。只需将以下代码添加到图像的css中：

width:100%;
height:100%;
object-fit:cover;
object-position: 0 0;

仅供参考，我稍微更改了div定义的结构，并添加了一些高度/宽度/浮点属性，你可以在这里看到一个演示（小提琴似乎没有按照评论中提到的某些原因运行我的代码）：
object-fit-solution

响应式设计：

对于移动设备，您需要编写媒体查询。一些指示：
1）使clearfix div向左浮动
2）删除图像和文本块上的浮动。也使宽度达到100％。

响应块布局

1 个答案: