@BenderIsGreat34

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

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


  • Вопрос задан
  • 145 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы