Помогите разобраться почему как бы я не масштабировал окно браузера, картинки как влитые на 360px. Как сделать так, чтобы они уменьшались, если не влазят в контейнер? при работе на телефонах картинки так же остаются 360 пикселей, к ним добавляются падинги контейнера и в результате они вылазят за пределы экрана. можно в ручную через медиа указывать какими они должны быть, но можно как-то автоматизировать?
пытался по инструкции указывать ширину в процентном соотношении, но картинки совершенно не реагировали.
img__mask это блок, который появляется на картинке в момент наведения мышью на изображение, а-ля карточка товаров.
<div class="cards">
<ul class="cards-item">
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-9.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-1.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-2.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-3.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-4.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-5.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-6.png" alt="portfolio">
</a>
</li>
<li>
<a href="#">
<div class="img__mask">
<h2>Modern T-shirt</h2>
<span>Print</span>
</div>
<img src="img/content/portfolio/normal-7.png" alt="portfolio">
</a>
</li>
</ul>
</div>
scss
.cards {
margin-top: 20px;
.cards-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
li {
list-style: none;
margin-top: 20px;
}
a {
display: block;
position: relative;
width: 360px;
height: 360px;
}
.img__mask {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
height: 100%;
left: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
opacity: 0;
transition: opacity 0.5s;
}
.img__mask:hover {
opacity: 1;
}
}
}
