响应式块布局

我有一个由两块组成的行的设计。响应式块布局

<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>

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

我试图扩大文本块以匹配行高，但是当图像较小时不起作用。

什么是缩放事物的好方法，以使图像和文本始终保持相同的高度？

来源

2014-10-16 Andrew Walters

您无法保证文字的高度与您的图片完全相同。你可以尽可能靠近，但最终的目标是将图像包裹起来，以便文本环绕它或位于图像的侧面，具体取决于你想要的方向（右侧还是左侧）。 – 2014-10-16 12:27:47

@CayceK你看了小提琴链接吗？ – 2014-10-16 12:31:25

是的，但我仍然没有看到你想要完成的事情。您可以在较小的屏幕尺寸下缩小文字的大小，但最后除非您有基于图像高度的确切字母数量，否则无法保证两者都适合相同的高度限制。这是因为文本可以是可变长度和大小。在文本中使用ems而不是像素可能会使它更容易，但它们会变得很快。你有最终的想法让你看起来像是让我更好地指出某件事情，并说这可能吗？ – 2014-10-16 12:54:03

CSS3具有可达到此目的的物体贴合属性（同时保留宽高比）。只是将下面的代码添加到CSS的图像：

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

仅供参考，我改变了DIV定义的结构了一下，加了一些高度/宽度/浮动属性，你可以在这里看到演示（小提琴似乎并不在评论中提到我的代码运行出于某种原因）：
object-fit-solution

响应式设计：

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

来源

2016-03-17 17:23:50 Fenil

你可以更新问题中的jsfiddle？ – 2016-03-19 14:24:57

@AndrewWalters请参阅[此链接]（http://fenildedhia.com/stackoverflow/test2.html）。出于某种原因，代码无法在小提琴上工作！ – Fenil 2016-03-25 17:57:12

我认为我们真的不希望图像的纵横比在缩放屏幕时出现偏斜。 – 2016-03-28 22:01:48

响应式块布局

回答

相关问题