Изображение CSS не помещается в контейнер

Question

Существует семь изображений разного размера, и я хочу поместить все изображения под большим изображением. Может ли кто-нибудь помочь мне решить эту проблему?

.imagelist img{ 
 
    width: 100px; 
 
    border: 2px solid black; 
 
    font-size: 0; 
 
}

<div class="wrapper"> 
 
    <img src="images/wide.jpg" width="100%" alt="wide-image"> 
 
</div> 
 
<div class="imagelist"> 
 
    <img src="images/a.jpg" width="100px;"> 
 
    <img src="images/b.jpg" width="100px;"> 
 
    <img src="images/c.jpg" width="100px;"> 
 
    <img src="images/d.jpg" width="100px; height:90px;"> 
 
    <img src="images/e.jpg" width="100px;"> 
 
    <img src="images/f.jpg" width="100px;"> 
 
    <img src="images/g.jpg" width="100px;"> 
 
</div>

Answer 1

Вы можете использовать следующее решение:

.imagelist img { 
 
    float:left; 
 
    width:calc(100%/7 - 4px); 
 
    border:2px solid black; 
 
    font-size:0; 
 
} 
 
.imagelist { 
 
    clear:both; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/350x350" width="100%" alt="wide-image"> 
 
</div> 
 
<div class="imagelist"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/350x350"> 
 
</div>