Как заставить/обернуть <img> внутри div?

Question

У меня есть обертка, которая содержит кучу миниатюр для фотогалереи с fancybox.

<div class="wrapper"> 
    <a href><img thumbnail></a> 
    <a href><img thumbnail></a> 
    <a href><img thumbnail></a> 
    ... 
</div> 

Обертка имеет определенный width. Количество эскизов варьируется от 1 до ... Проблема заключается в том, что пространство внутри обертки предназначено только для максимального количества 7 миниатюр. Таким образом, все миниатюры над 7 будут отображаться снаружи. Как я могу архивировать, что все миниатюры останутся внутри оболочки ``, так что все 7 скрыты?

Большое спасибо.

Answer 1

добавить CSS в свой .wrapper DIV

.wrapper { 
    overflow:hidden; 
} 

Answer 2

вы можете добавить свиток к вашему .wrapper.it может быть достигнуто путем добавления Переполнение-х: прокрутка; Переполнение-у: прокрутка; на ваш .wrapper. который сохранит ваш размер обертки таким же, и вы сможете добавить любое количество изображений по мере необходимости.

.wrapper{ 
 
    width:300px; 
 
    height:200px; 
 
    overflow-x:scroll; 
 
    overflow-y:scroll; 
 
    background:yellow; 
 
    } 
 
img{ 
 
    width:100px; 
 
    height:100px; 
 
    margin:10px; 
 
    }

<div class="wrapper"> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 

 
</div>

Answer 3

Вы пробовали с

переполнения: скрытый; важный (CSS).