我有三个内联图像。它们的宽度为330像素,分隔为10像素。当显示在手机上或1,010px以下的任何窗口中时,图像在另一个下方显示。我希望它们减小尺寸,以便它们保持内联。我试图通过在代码周围放置100px的div来模拟jsfiddle中的问题。实际代码中没有该内容。如您所见,图像不在一行上。这里有许多如何执行此操作的示例,但是没有一个可以解决多个图像,我可以找到。有没有办法做到这一点?jsfiddle
<style>
.imagewrapper img {
max-width: 90%;
height: auto;
}
.box_row_f { display:inline-block; border:4px solid #5CB65C }
.box_row_n { display:inline-block; border:4px solid #5CB65C; margin-left:10px }
</style>
<div style="width:100px">
<div class="imagewrapper">
<div class="box_row_f"><img src="someimage.jpg"></div>
<div class="box_row_f"><img src="someimage.jpg"></div>
<div class="box_row_f"><img src="someimage.jpg"></div>
</div>
</div>
如果您处理大量图像,那么最好为所有图像创建一个响应式图像类,并且原始图像尺寸是否较大也无关紧要。还可以在您的css box_row_n中看到它,但是我在您的html部分找不到此类。我不知道为什么您将100px用于第一格。无论如何,您都可以使用它。小提琴
body{
margin:0;
}
.imagewrapper {
display: inline-flex;
}
.img-responsive {
width: 100%;
display: block;
margin: 0 auto;
height: auto;
}
.box_row_f {
border: 4px solid #5CB65C;
margin-left: 10px;
}
<div class="imagewrapper">
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句