Нужно поместить на изображение текст, иконку и т.п, но при обертывание каждого изображение в доп. они теряют свойства основного элемента
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>
→ Ссылка
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>