IMG не подстраивается под ширину окна браузера?

Question

[Иван]

Помогите разобраться почему как бы я не масштабировал окно браузера, картинки как влитые на 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;
      }
    }
  }

Comments

[Rustam Bainazarov]

Где нормальный код? Ширина картинок зависит не от HTML, а от CSS.

Классика сброса для img:

img {
   max-width: 100%;
   height: auto;
   vertical-align: middle;
}

[Rustam Bainazarov]

Вот добавили вы код, уже хорошо, но зачем там вообще жёсткие 360px? Тем более, что у вас адаптивность.

[Иван]

Рустам Байназаров, давайте сначала. html код - отдельный блок никак не связанный с другими блоками и элементами. css только что добавил. пример сброса я уже использовал, о чём сказал ранее. я бы дал ссылку на codeopen, но без самих картинок не вижу смысла. возможно я допустил ошибку в самом коде и не замечают этого

[Rustam Bainazarov]

BenderIsGreat34, сделал вам песочницу со своим кодом, изучайте, пожалуйста:


Адаптивность блоков сетки тоже есть.

[Иван]

Рустам Байназаров, убрал ширину и высотку в пикселях. установил ширину и высоту 100%. пока картинка не подстраивается

[Rustam Bainazarov]

BenderIsGreat34, просто у вас код косой довольно и слишком усложненный. Плюс, нейминг классов неверный (почему обертка сетки имеет класс .cards-item?):


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

[Иван]

Рустам Байназаров, в каком плане усложненный? пара классов стилей всего лишь. у обертки такой нейминг потому что там раньше не список был, когда в итоге изменил на список, решил имя оставить, потому что привык к нему, но да, в конце я его изменю, потому что он не отражает действительность. на счёт косого спорить не буду) код в песочницу я добавил позже, я не знал как вставлять картинку в песочнице, потом додумался и сделал, за это прошу извинить

[Rustam Bainazarov]

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

[Иван]

Рустам Байназаров, да, я увидел. большое вам спасибо, изучу оба варианта, но просто хотелось бы узнать, как неопытному верстальщику, что не так, чтобы пофиксить это и стать лучше

[Rustam Bainazarov]

BenderIsGreat34, я обновил свой пример выше, сделал два компонента (сетка + карточка):


Так же вы можете изучить ваш код, поправленный мной, чтобы понять причину: