相同高度图像和文本

有没有什么办法可以使图像div的高度达到它旁边的文本？相同高度图像和文本

我正在设计一个博客帖子元素，它的左侧有一些文字，右侧有一个图片，但是文字和图片在某些分辨率看起来不太好看的情况下出了问题。现在我能想到的最好的事情就是给图像设置一个静态高度，但这并不能真正解决问题，我不得不为不同的高度设置不同的断点，这些断点在调整大小时看起来相当麻烦。

我试图效仿的这个样子：https://www.lonelyplanet.com/france/paris#survival-guide （滚动到 '最近的文章' 部分）

HTML

<div class="recent-petra"> 
    <div class="petra-content"> 
    <h4>Petra</h4> 
    <cite>Oct. 4</cite> 
    <p class="recent-desc">Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p> 
    </div> <!-- petra-content --> 
    <div class="petra-img"></div> 
    </div>

CSS

.recent-petra { 
display: flex; } 

.petra-content { 
width: 60%; 
margin: 0 5%; } 

.petra-img { 
width: 20%; 
background-image:  url('http://4.bp.blogspot.com/_qWovdGs59MY/RykS9HDQGMI/AAAAAAAAAJo/s79SRNqRNok/s400/Petra+1.jpg'); 
height: 300px; 
margin: 0 5%; }

该codepen在这里：http://codepen.io/reskk/pen/ozPwAw - p可以更好地看看那里，所以你可以看到我在说什么的视觉例子。

我的意思是..这是什么，甚至可以用CSS？我是否想要做一些仅仅是一个巨大的痛苦，即是否必须找到适当大小的图片等，或者我可以使用CSS来实现这一点？

我基本上希望图像高度根据其旁边文本的高度进行缩放，以便它很好且响应快。

感谢， Reskk

来源

2016-10-16 Reskk

你提到的网站使用不同的断点图像的固定高度。它确实是做图像的标准方式（其他方式涉及使高度响应，这在我的经验中使得图片在某些断点处太小，它沿对角线缩放，而不是水平（宽度响应））。

为了用您的文本缩放图片，您必须使用媒体查询使用断点，这将在各个断点处更改图像和文本的高度。

@media (min-width: 0px) and max-width(400px){ 

img{ 
width:40% 
height:200px; 
} 

#divcontainingtext{ 
font-size:14px; 
} 
} 

@media (min-width: 401px) { 
/* insert new fixed height and new font-size here */ 
}

欲了解更多有关媒体查询看到：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

来源

2016-10-16 23:26:27 the12

你是正确的轨道上实现Flexbox和背景图像这里。有几件事将你抛弃。首先，您已将图像div设置为像素高度。这会将Flexbox中的高度相等的列关闭。其次，集装箱内的分隔线的边际数量达到其高度。因此，在CodePen上，您的段落的原生边距为1em 0em，并且由于它是该列中的最后一项，因此右侧列的高度与其匹配。

来源

2016-10-17 00:44:08

相同高度图像和文本

回答

相关问题