相同高度的图像和文字答案

【问题标题】：Same Height Image & Text相同高度的图像和文字
【发布时间】：2017-02-25 20:12:23
【问题描述】：

有什么方法可以让图像 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 - 看起来可能会好很多，这样您就可以看到我在说什么的视觉示例。

我的意思是.. 这对 CSS 来说甚至是可行的吗？我是否正在尝试做一些非常痛苦的事情，即我是否必须找到适当大小的图像等，或者我可以使用 CSS 来实现这一点？

我本质上希望图像高度根据它旁边的文本的高度进行缩放，这样它就很好并且响应迅速。

谢谢，雷斯克

【问题讨论】：

标签： css image height scale

【解决方案1】：

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

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

@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

【讨论】：

【解决方案2】：

您在此处使用 flexbox 和 background-image 走在正确的轨道上。有几件事让你失望。首先是您将图像 div 设置为像素高度。这将关闭 Flexbox 中的等高列。其次是容器内 div 的边距计入其高度。因此，在 CodePen 上，您的段落的原生边距为 1em 0em，并且由于它是该列中的最后一项，因此右侧列的高度与之匹配。

【讨论】：