Question

我试图将一些图片插入博文中。

我希望插入一些具有不同宽高比的图像（可能在2到4之间），这一行是总文本区域的宽度。这一行图像将插入两段文本之间。

我希望所有图像都适合文本区域的宽度（随窗口大小而动态变化），我希望它们都具有相同的高度（当然意味着＆＃34; landscape＆＃ 34;图像比＃34;肖像＆＃34;等等占据更多的水平空间。

文本区域的宽度将根据窗口/屏幕大小动态变化，因此占用图像的总面积也必须相应更改。

从本质上讲，我希望这组图像能够以相同的高度排列成一排，然后表现得几乎与它们的行为完全一样。＆＃34; row＆＃34;本身只是一个形象。

然而，我发现强制图像全部都是相同高度的唯一方法是为它们声明一些固定的高度 - 但是如果文本区域缩小以使这个高度太大，那么图像溢出。

到目前为止，我最好的尝试是这样的：

<div id="textArea">
    <div id="imageContainer" style="height:250px; width:100%; display:flex">
        <img src="..." style="height:100%" />
        <img src="..." style="height:100%" />
        ...
    </div>
</div>

This fiddle显示上述代码正常运行。它完全像我一样，直到窗口太小，迫使图像溢出。

对此的任何帮助将不胜感激。

Answer 1

您可以设置属性溢出并将其设置为自动。

这意味着它应该是这样的：

<div id="textArea">
    <div id="imageContainer" overflow="auto" style="height:250px; width:100%; display:flex">
        <img src="..." style="height:100%" />
        <img src="..." style="height:100%" />
    </div>
</div>

这应该自动滚动条。

Answer 2

使用此代码

 #page {
   height: auto;
   width: 100%;
   background-color:red;
 }

 #content {
   height: auto;
   width: 60%;
   background-color: yellow;
 }

 #imageContainer {
   width: 100%;
   height: auto;
   background-color:white;
 }

 #imageContainer img {
   height: 250px;
 }

 <div id="page">
 <div id="content">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue accumsan nulla ac varius. Fusce dapibus blandit nisl et ornare. Nulla vestibulum at ante in posuere. Nam maximus metus in sapien tempus, sed rutrum enim congue. Sed vehicula ligula elementum arcu rhoncus porta. Ut bibendum vel ante ut fringilla. Vestibulum eget malesuada tellus. Fusce vel tellus vitae justo feugiat sodales iaculis sed lectus. Mauris rhoncus leo a ex accumsan, dignissim feugiat lectus ornare.
 </p>
 <div id="imageContainer">
 <img src="http://i.imgur.com/jdYZkWD.png" />
 <img src="http://i.imgur.com/NChb4fE.png" />
 </div>
 <p>
 Nullam sit amet volutpat tellus. Integer malesuada rutrum elit, a cursus augue mollis non. Ut in erat ultricies, interdum ipsum eget, rutrum velit. Aliquam sed tortor non odio cursus hendrerit. Praesent iaculis tortor lacus, nec imperdiet arcu pharetra eget. Morbi eu libero pretium, efficitur est a, rhoncus enim. Vestibulum in eros velit. Aenean molestie tellus quis mi fringilla posuere. Aliquam eu leo augue. Etiam et velit nisi. Quisque accumsan porttitor purus, nec condimentum urna mattis ac. Mauris venenatis pharetra maximus. Nunc hendrerit arcu vel orci varius, in sodales libero vulputate. Sed condimentum ipsum diam, ut faucibus magna congue ut.
 </p>
 </div>
 </div>

CSS中的响应式水平图像布局

2 个答案: