Javascript css-如何在移动布局中对齐css网格图像？

我在桌面布局上创建了一个CSS网格，其图像如下所示：

当我使用chrome中的开发者工具将其设置为移动布局时，它给了我以下信息：

图像变得模糊，这可能是由于最初图像的分辨率。我想知道我是否需要压缩我的图像并在媒体查询中替换它，或者我可以在移动版面上每行放置一张图像

这是我的代码：

 <!--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>

@端部
@推送（“样式”）
@介质（最大宽度：767px）{
.床{
网格柱：1/3；
网格行：1/3；
高度：20px；
}
.枕头{
网格柱：3；
网格行：1/3；
}
.厨房{
网格柱：3；
网格行：3/5；
}
1.客厅{
网格柱：2/3；
网格行：3/1；
}
.沙发{
网格列开始：3；
网格行：5/-1；
}
}
.包装纸{
显示：网格；
网格模板列：3fr 2fr 3fr；
网格模板行：重复（8，1fr）；
填充物：5em；
网格间距：2.5em；
背景色：黑色；
高度：900px；
最大宽度：100%；
}
.wrapper>div{
位置：相对位置；
}
.wrapper>div>a{
位置：绝对位置；
底部：10px；
右：10px；
颜色：白色；
文字装饰：无；
}
.wrapper>div:：after{
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
背景色：黑色；
颜色：白色；
填充：.5rem；
}
.床{
网格柱：1/2；
网格行：1/3；
身高：110%；
宽度：100%；
}
.枕头{
网格柱：2；
网格行：1/3；
身高：110%；
宽度：90%；
}
.厨房{
网格柱：3；
网格行：2/5；
}
1.客厅{
网格柱：1/3；
网格行：3/-1；
}
.沙发{
网格列开始：3；
网格行：5/-1；
}
img{
宽度：100%；
身高：100%；
边界半径：5px；
}
身体{
背景色：黑色；
}
.标题部分{
边框底部：3倍实心#E5；
显示：内联块；
宽度：100%；
}
.主标题{
页边距底部：0；
字体大小：1.5rem；
浮动：左；
文本转换：大写；
}
.主标题：：之后{
边框底部：3px实心#552244；
内容：“；
显示：块；
利润底部：-3px；
填充：2px；
}

---

我不太确定如何解决这个对齐问题。我尝试更改媒体查询中的网格行和列，但它没有反映任何更改。在此问题上的任何帮助都将不胜感激。

您可以尝试网格模板列：重复（自动填充，最小值（250px，1fr））；用于您的响应代码。

正文{
背景色：黑色；
}
img{
宽度：100%；
身高：100%；
边界半径：5px；
对象匹配：覆盖；
}
.包装纸{
显示：网格；
网格模板列：重复（6，1fr）；
填料：2米；
网格间距：2米；
背景色：黑色；
高度：900px；
最大宽度：100%；
}
.wrapper>div{
位置：相对位置；
}
.wrapper>div>a{
位置：绝对位置；
底部：10px；
右：10px；
颜色：白色；
文字装饰：无；
}
.床{
格构柱：跨度2；
网格行：跨度1；
}
.枕头{
格构柱：跨度2；
网格行：跨度1；
}
.厨房{
格构柱：跨度4；
网格行：跨度3；
}
1.客厅{
格构柱：跨度2；
网格行：跨度1；
}
.沙发{
格构柱：跨度2；
网格行：跨度2；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.包装纸{
网格模板列：重复（自动填充，最小值（250px，1fr））；
}
.床，
.枕头，
.厨房，
客厅
.沙发{
格构柱：跨度1；
网格行：跨度1；
}
}

文件

您的图像看起来很模糊，因为它的纵横比没有保持。在指定图像的高度和宽度时，保持其纵横比的一种方法是使用。请注意，通过在使用

对象拟合：封面

时明确指定其高度和宽度，图像将在需要时被截断并居中。一个很好的链接显示了

对象匹配的简单演示

即使使用

object fit:cover

来保持图像的纵横比，当视口的宽度太小时，图像的截止部分可能太大，以至于图像不再传递有用的信息。因此，我们必须调整图像的位置。因为网格项的放置模式是不规则的，所以我建议您在较小的屏幕上一行只显示一个图像。您可以通过将

wrapper

的

display

属性更改为

flex

来实现这一点，如下所示

但是，如果您有一个规则的网格项放置模式（例如，每个网格行3个项目，第n个项目总是跨越2列），您可以尝试从中读取此有用的链接，以避免同时使用

媒体查询

下面是一个简单的示例，它将
显示设置为
flex
，因此当屏幕大小小于或等于800px时，每行仅显示一个项目。注意
objectfit:cover
如何强制图像填充其大小，但仍保持其纵横比（当然，您可以根据需要调整此设置）


*{
框大小：边框框；
}
身体{
填充：0px 20px；
}
.包装纸{
显示：网格；
网格模板列：3fr 2fr 3fr；
网格自动行：100px；
柱间距：10px；
行间距：10px；
}
.wrapper>div{
边框：1px实心#121212；
边界半径：5px；
}
.wrapper>div img{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
边界半径：继承；
}
.床{
网格柱：1/2；
网格行：1/3；
}
.枕头{
网格柱：2/3；
网格行：1/3；
}
.厨房{
网格柱：3/4；
网格行：2/4；
}
1.客厅{
网格列：