Question

我在div中垂直对齐了三个图像。当浏览器缩小时，第三个图像不再适合div，导致该图像下降到第二行。我在CSS中使用了auto和100％宽度和高度属性，但它不会保持图像内联，也不会调整图像大小。任何人都知道如何解决这个问题？

<div class="media">
    <img class="media_image" src="source1_name">
    <p>Some text that overlays the image</p>                            
</div>
<div class="media">
    <img class="media_image" src="source2_name">    
    <p>Some text that overlays the image</p>                
</div>
<div class="media">
    <img class="media_image" src="source3_name">    
    <p>Some text that overlays the image</p>                        
</div>      

.media {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 16px;
    }

 .media img {
    width: auto;
    height: auto;
    }

.media_image { 
    display: block; 
    }

Answer 1

试试这个：

.media {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 33,33%;
    margin-left: 16px;
    }

 .media img {
    width: 100%;
    height: auto;
    }

.media p {
   position: absolute;
   left: 0;
   bottom: 20px;
   }

它将元素宽度设置为父元素（正文？）的三分之一，将图像宽度设置为这三个元素的全宽，当父容器在较小的屏幕上缩小时（这取决于例子100％宽度）

在最后一条规则中，主要是绝对位置对于叠加图像很重要，其余/实际位置由你决定。

当窗口尺寸减小时自动收缩图像（并保持内联）

1 个答案: