css - Как выровнять CSS сетку изображений в мобильном макете?

Question

У меня есть сетка CSS, созданная с изображениями на макете рабочего стола, которая выглядит следующим образом:

Когда я установил ее на мобильный телефон макет с использованием инструментов разработчика в chrome, это дает мне это:

Изображения становятся размытыми, что, вероятно, связано с разрешением изображения первоначально. Мне было интересно, нужно ли мне сжимать свое изображение и заменять его по медиа-запросу, или я могу просто поместить одно изображение per row в мобильную раскладку?

Это мой код:

 <!--CSS Grid to display home page images -->
<div class="wrapper">

    <div class=" bed">
      <img src="{{asset('/images/Home_Bed.jpg')}}" alt=""> 
      <a href="#">New Product <span class="">➡</span></a>
    </div>
    <div class="pillow"><img src="{{asset('/images/Home_Pillow.jpg')}}" alt="">
      <a href="#">Best Seller <span class="">➡</span></a></div>
    <div class=" kitchen"><img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="">
      <a href="#">Offer <span class="">➡</span></a>
    </div>
    <div class=" living-room"><img src="{{asset('/images/Shop_Page.jpg')}}" alt="">
      <a href="#">DC Home Design <span class="">➡</span></a>
    </div>
    <div class=" sofa"><img src="{{asset('/images/Home_Sofa.jpg')}}" alt="">
      <a href="#">Top Rated <span class="">➡</span></a>
    </div>




</div>

@endsection

@push('style')
<style>

@media (max-width: 767px) {

.bed {
  grid-column: 1/3;
  grid-row: 1 / 3;
  height: 20px;
}
.pillow {
  grid-column: 3;
  grid-row: 1 / 3;
}



.kitchen {
  grid-column: 3;
  grid-row: 3 / 5;
}



.living-room {
  grid-column: 2 / 3;
  grid-row: 3 / 1;
}



.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}

}



.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-template-rows: repeat(8, 1fr);
  padding: 5em;
  grid-gap: 2.5em;
  background-color: black;

  height: 900px;
  max-width: 100%;
}

.wrapper>div {
  position: relative;
}

.wrapper>div>a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  text-decoration: none;
}

.wrapper>div::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: black;
  color: white;
  padding: .5rem;
}

.bed {
  grid-column: 1/2;
  grid-row: 1/3;
  height: 110%;
  width:100%;
}


.pillow {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 110%;
  width:90%;
}



.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}



.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}



.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}



img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}


body{
    background-color: black;
    }





    .heading-part {
        border-bottom: 3px solid #e5e5e5;
        display: inline-block;
        width: 100%;
    }

    .main-title {
        margin-bottom: 0;
        font-size: 1.5rem;
        float: left;
        text-transform: uppercase;
    }

    .main-title::after {
        border-bottom: 3px solid #552244;
        content: "";
        display: block;
        margin-bottom: -3px;
        padding: 2px;
    }
</style>

Я не слишком уверен, как решить эту проблему с выравниванием. Я попытался изменить строку и столбец сетки в моем медиа-запросе, но это не отражает никаких изменений. Любая помощь в этом вопросе приветствуется.

Answer 1

Ваше изображение выглядит размытым, поскольку его соотношение сторон не поддерживается. Один из способов сохранить соотношение сторон при указании высоты и ширины изображения - использовать object-fit: cover. Обратите внимание, что при явном указании его высоты и ширины при использовании object-fit: cover изображение будет обрезано при необходимости и будет отцентрировано. Хорошая ссылка, которая показывает простую демонстрацию object-fit, доступна здесь .

Даже при использовании object-fit: cover для поддержания соотношения сторон изображения, когда ширина области просмотра слишком мала, Вырезанная часть изображения может быть слишком большой, чтобы изображение больше не передавало полезную информацию. Из-за этого нам придется корректировать расположение изображений. Поскольку у вас есть нерегулярный шаблон размещения элементов сетки, я предлагаю вам отображать только одно изображение в одной строке на экранах меньшего размера. Вы можете сделать это, изменив свойство display вашего wrapper на flex, как показано ниже.

Однако, , если у вас есть регулярный шаблон размещения элементов сетки (например, 3 элементов в строке сетки и n-й элемент всегда занимает 2 столбца), вы можете попробовать прочитать эту полезную ссылку из CSS Трюки , чтобы вообще не использовать media-query.

Вот простой пример это устанавливает display в flex, таким образом, показывая только один элемент в строке, когда размеры экрана меньше или равны 800px. Обратите внимание, как object-fit: cover заставляет изображение заполнять его размер, но при этом сохраняет пропорции (вы, конечно, можете настроить этот параметр по своему усмотрению).

* {
  box-sizing: border-box;
}

body {
  padding: 0px 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-auto-rows: 100px;
  column-gap: 10px;
  row-gap: 10px;
}

.wrapper>div {
  border: 1px solid #121212;
  border-radius: 5px;
}

.wrapper>div img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.bed {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.pillow {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.kitchen {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / 6;
}

.sofa {
  grid-column: 3 / 4;
  grid-row: 4 / 6;
}

@media (max-width: 800px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper>div {
    padding: 0px 20px;
    margin: 10px 0px;
  }
  .wrapper>div img {
    max-width: 100%;
    max-height: 80vh;
  }
}

<div class="wrapper">
  <div class="bed">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="pillow">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="kitchen">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="living-room">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="sofa">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
</div>

Answer 2

Вы можете попробовать grid-template-column: repeat (auto-fill, minmax (250px, 1fr)); для вашего адаптивного кода.

body {
  background-color: black;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 2em;
  grid-gap: 2em;
  background-color: black;
  height: 900px;
  max-width: 100%;
}

.wrapper > div {
  position: relative;
}

.wrapper > div > a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  text-decoration: none;
}

.bed {
  grid-column: span 2;
  grid-row: span 1;
}

.pillow {
  grid-column: span 2;
  grid-row: span 1;
}

.kitchen {
  grid-column: span 4;
  grid-row: span 3;
}

.living-room {
  grid-column: span 2;
  grid-row: span 1;
}

.sofa {
  grid-column: span 2;
  grid-row: span 2;
}



@media screen and (max-width: 767px) {
  .wrapper {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .bed,
  .pillow,
  .kitchen,
  .living-room,
  .sofa {
   grid-column: span 1;
  grid-row: span 1;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <div class=" bed">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">New Product <span class="">➡</span></a>
      </div>
      <div class="pillow">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">Best Seller <span class="">➡</span></a>
      </div>
      <div class=" kitchen">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">Offer <span class="">➡</span></a>
      </div>
      <div class=" living-room">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">DC Home Design <span class="">➡</span></a>
      </div>
      <div class=" sofa">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">Top Rated <span class="">➡</span></a>
      </div>
    </div>
  </body>
</html>