Нужно поместить на изображение текст, иконку и т.п, но при обертывание каждого изображение в доп.
они теряют свойства основного элемента

1 часть не обернутая

<div class="images">
  <div class="images_left">
    <img src="img.jpg" alt="">
    <img src="img.jpg" alt="">
    <img src="img.jpg" alt="">
    <img src="img.jpg" alt="">
  </div>
  <div class="images_right">
    <img src="img.jpg" alt="">
    <img src="img.jpg" alt="">
    <img src="img.jpg" alt="">
    <img src="img.jpg" alt="">
  </div>
</div>

2 часть обернутая

<div class="images">
  <div class="images_left">
    <div class="foto_1">
      <img src="" alt="">
      <a href=""></a>
    </div>
  </div>
  <div class="images_left">
    <div class="foto_1">
      <img src="" alt="">
      <a href=""></a>
    </div>
  </div>
  <div class="images_left">
    <div class="foto_1">
      <img src="" alt="">
      <a href=""></a>
    </div>
  </div>
</div>

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

Автор решения: CbIPoK2513

Надеюсь я правильно додумал вопрос..
Суть проблемы - изображения больше чем родительский блок.

Решение проблемы: ограничить размеры относительно родительского блока при помощи правил max-width и max-height

.images {
  display: flex;
  justify-content: space-between; 
}

.images img {
  max-width: 100%;
  max-height: 100%;
}
<div class="images">
  <div class="images_left">
    <div class="foto_1">
      <img src="//i.imgur.com/PNo12o4.png" alt="">
      <a href="#"></a>
    </div>
  </div>
  <div class="images_left">
    <div class="foto_1">
      <img src="//i.imgur.com/PNo12o4.png" alt="">
      <a href="#"></a>
    </div>
  </div>
  <div class="images_left">
    <div class="foto_1">
      <img src="//i.imgur.com/PNo12o4.png" alt="">
      <a href="#"></a>
    </div>
  </div>
</div>

→ Ссылка