Question

有什么方法可以让图像对它旁边的文字进行高度缩放吗？

我正在设计一个博客文章元素，左边有一些文字，右边有一个图像，但文字和图像在某些分辨率下看起来不太好看。我现在能想到的最好的事情就是给图像一个静态的高度，但这并没有真正解决问题，而且我必须为不同的断点设置不同的高度，这在调整大小时会显得很笨拙。

我想模仿这个样子：https://www.lonelyplanet.com/france/paris#survival-guide （滚动到＆＃39;最近的文章＆＃39;部分）

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实现这一目标吗？

我基本上希望图像高度根据旁边文本的高度进行缩放，以便它具有良好的响应性。

谢谢， Reskk

Answer 1

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

Answer 2

您提到的网站在各个断点处使用固定高度的图像。它确实是拍摄图像的标准方式（其他方式包括使高度响应，这在我的经验中使图像在某些断点处太小。它对角缩放，而不是水平缩放（宽度响应））。

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

@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

相同的高度图像＆amp;文本

2 个答案: