2017-04-05 81 views
0

如果div只包含一个图像,但如果多于一个图像,则图像宽度为100%,然后根据项目设置图像。设置图像的高度和宽度根据图像数量单格div

例。 1图像然后宽度100%和高度100%,2图像然后宽度50%和高度50%,3图像然后宽度33.333%和高度33.333%。 enter image description here

+0

对于一个简单而优雅的方法,您可以使用引导 – Ionut

+0

请尽快解决这个问题,因为可能 –

+0

感谢名单lonut但如何使用bcz我们可以只给自举类 –

回答

0

尽量拉出来一些图片的人要采取的地方

.container{display: flex; justify-content: flex-start; flex-direction: row;} 
 
img{display: block; width: 100%; object-fit: contain;}
<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

+0

你没有得到我的观点,,,如果只有一个图像,那么它不适合100% –

+0

我试试这谢谢它的工作。做得好。更多的帮助,我只需要在一行中的4个图像如何断行 –

+0

将CSS更改为'.container {display:flex; justify-content:flex-start; flex-direction:row; flex-wrap:wrap;} img {display:block;最大宽度:25%;宽度:100%; object-fit:fill;}' – Venzacc