如何响应式地在一个div内的单行内排列图像

Question

我试图将链接放在一行图像上，以便不同的图像具有不同的链接。我也有这个div缩小以适应某些媒体屏幕尺寸。但是，图像并未根据包装要求调整大小。请帮忙。

这里的HTML：

.box { 
 
    width: 100%; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 
@media screen and (min-width: 768px) and (max-width: 1024px) { 
 
    body { 
 
    text-align: center; 
 
    background: url(image/bg.png) center top; 
 
    } 
 
    #wrapper { 
 
    width: 768px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    } 
 
} 
 
@media screen and (min-width: 1024px) { 
 
    body { 
 
    text-align: center; 
 
    background: url(image/bg.png) center top; 
 
    } 
 
    #wrapper { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    }

<div id="wrapper"> 
 
    <div class="box"> 
 
    <img src="image/pea.jpg"> 
 
    </div> 
 
    <div class="box"> 
 
    <img src="image/pea_01.jpg"> 
 
    <img src="image/pea_02.jpg"> 
 
    <img src="image/pea_03.jpg"> 
 
    <img src="image/pea_04.jpg"> 
 
    <img src="image/pea_05.jpg"> 
 
    </div> 
 
    
 
    <!-- main issue here --> 
 
    <div class="box"> 
 
    <img src="image/pea_footer.jpg"> 
 
    </div> 
 
</div>

这里的排队（台式机）的屏幕截图。移动添加显示后，看起来似乎很好：inline-block; 宽度：自动;以.box：

Answer 1

我认为最好不要将明确的宽度或高度应用于图像标记。 请尝试：

max-width:100%; 
max-height:100%; 

只要使用基于百分比的布局，而不是像素或其它测量。 例如：

<img width="50%">: that will fill half of the containing element, at any size 
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small. 

Answer 2

我想删除任何静态的宽度，因为你只需要检测当视域是具有一定规模，然后更改IMG宽度，然后，我在这里做。我将每个图像设置为显示块以删除它们周围的任何边距或填充。您可能不想这样做，但我喜欢将其设置为默认值。

这样，您可以选择适合您的不同断点，而不是在每个断点处设置静态宽度。这是响应式发展的美妙之处。保持灵活性而不是控制包含div的情况;让内容运行。在全屏模式下运行，下面这段代码来查看完整的桌面样式（每个IMG去20％的50％，而非）：

.box { 
 
    width: 100%; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 20%; 
 
    float: left; 
 
    } 
 

 
@media screen and (max-width: 767px) { 
 
img { 
 
width: 50%; 
 
} 
 
}

<div id="wrapper"> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/100x100"> 
 
    </div> 
 
    <div class="box"> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
 
    </div> 
 
    
 
    <!-- main issue here --> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/100x100"> 
 
    </div> 
 
</div>

Answer 3

你.box的可能是display:flex

.box { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-around; 
} 

请记住，您的5 <img>应该是图标，不包含您的background（云）。
我认为下面的代码会为你的形象是正确的：

.box img { 
    max-width: 20%; 
}