我的设计是由两个块组成的行。
http://jsfiddle.net/dhxr25m6/
<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>
该页面在全尺寸显示器上看起来不错,但在平板电脑分辨率下,图像的高度约为文本块的一半。
我尝试按比例放大文本块以匹配行高,但是当图像较小时,这种方法不起作用。
什么是缩放事物以使图像和文本始终处于相同高度的好方法?
最佳答案
CSS3具有可以实现此目标的对象适合属性(同时保留了宽高比)。
只需将以下代码添加到图像的css中:
width:100%;
height:100%;
object-fit:cover;
object-position: 0 0;
仅供参考,我稍微改变了div定义的结构并添加了一些height / width / float属性,您可以在此处看到一个演示(小提琴由于注释中的某些原因似乎无法运行我的代码):
响应式设计:
对于移动设备,您将需要编写媒体查询。
为此的一些指针:
1)使clearfix div浮动到左侧
2)删除图像和文本块上的浮点数。同时将宽度设置为100%。
关于css - 响应块布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26404105/