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

你可以试试 grid-template-columns: 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>

Answer 2

您的图像看起来很模糊，因为它的纵横比没有保持不变。在指定图像的高度和宽度的同时保持其纵横比的一种方法是使用object-fit: cover。请注意，通过在使用object-fit: cover 时明确指定其高度和宽度，图像将在需要时被截断并居中。 here 提供了一个很好的链接，显示了 object-fit 的简单演示。

即使使用object-fit: cover 来保持图像的纵横比，当视口的宽度太小时，图像的截断部分可能会太大，图像不再传达有用的信息。因此，我们必须调整图像的位置。因为您有一个不规则模式的网格项目放置，我建议您在较小的屏幕尺寸上只在一行显示一张图像。您可以通过将wrapper 的display 属性更改为flex 来做到这一点，如下所示。

但是，如果您有规则的网格项目放置模式（例如，每个网格行 3 个项目，第 n 个项目始终跨越 2 列），您可以尝试从CSS Tricks 阅读这个有用的链接避免完全使用media-query。

这是一个简单的示例，将display 设置为flex，因此当屏幕尺寸小于或等于 800 像素时，每行仅显示一个项目。请注意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>