Не работает overflow:hidden при добавлении margin/padding

Question

Помогите, пожалуйста, решить проблему. Вкратце, хочу вставить 6 картинок, которые будут отображаться последовательно горизонтально. При наведении картинка должна масштабироваться не меняя своего размера, а её расстояние со всех четырех сторон должно равняться, условно, 20 пикселей.

Проблема заключается в том, что при добавлении в css строк padding/margin для картинки, overflow:hidden перестаёт работать, и картинка начинает выходить за свои заданные пределы.

В итоге хочу добиться, что бы картинки отступали от левого края, и расстояние между ними составляло 20 пикселей. Помогите, пожалуйста!

Вот мой код:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">

  <style>
   .scale {
    display: inline-block; 
    overflow: hidden; 
    position: relative;
   }
   .scale img {
    margin: 20px; /*Перестает работать при добавлении этой строки.*/ 
    width:430px;
    height:270px;
    transition: 1s; 
    display: block; 
   }
   .scale img:hover {
    transform: scale(1.1); 
   }
  </style>
 </head>
 <body>
  <body>
  <div class="scale"><img src="https://picsum.photos/800/472"> </div>
  <div class="scale"><img src="https://picsum.photos/800/472"> </div>
  <div class="scale"><img src="https://picsum.photos/800/472"> </div>
  <div class="scale"><img src="https://picsum.photos/800/472"> </div>
  <div class="scale"><img src="https://picsum.photos/800/472"> </div>
  <div class="scale"><img src="https://picsum.photos/800/472"> </div>

 </body>
</html>

Пробовал решить проблему используя флексбоксы, где расставлял картинки с помощью flex-wrap:wrap; .К сожалению, там overflow:hidden не работал. Пробовал добавлять позиции relative для объекта. Пока тоже не помогло :(

Answer 1

Сделайте следующим образом:

.container {
  display: flex;
  flex-flow: row wrap;
}

.scale {
  flex: 0 1 auto;
  overflow: hidden;
  margin: 20px;
  /*width: 430px;
  height: 270px;*/
  width: 100px;
  height: 70px;
}

.scale img {
  display: flex;
  /*width: 430px;
  height: 270px;*/
  width: 100px;
  height: 70px;
  transition: 1s;
}

.scale img:hover {
  transform: scale(1.1);
}

<div class="container">
  <div class="scale"><img src="https://picsum.photos/800/472"></div>
  <div class="scale"><img src="https://picsum.photos/800/472"></div>
  <div class="scale"><img src="https://picsum.photos/800/472"></div>
  <div class="scale"><img src="https://picsum.photos/800/472"></div>
  <div class="scale"><img src="https://picsum.photos/800/472"></div>
  <div class="scale"><img src="https://picsum.photos/800/472"></div>
</div>

Размеры картинок я уменьшил специально, чтобы удобнее смотрелось. Нужные вам размеры закомментированы.

БЛОГ НА HUSL

Не работает overflow:hidden при добавлении margin/padding

Ответы (1 шт):