使网格Div响应

Question

.subcategory-main-wrapper {
display: grid;
grid-template-columns: repeat(4, max-content);
position: absolute;
width: 100%;
column-gap: 4%;
justify-content: center;
height: 360px;
@media @tabletScreens {
height: 280px;
}
@media @mobileScreens {
height: 450px;
row-gap: 30px;
column-gap: 7%;
grid-template-columns: repeat(2, max-content);
}
}
.subcategory-image-container {
width: 278px;
height: 278px;
border-radius: 50%;
background-color: black;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

<div class="category-container">
<div class="subcategory-main-wrapper">
<div class="subcategory-container">
<div class="subcategory-image-container">
</div>
</div>
<div class="subcategory-container">
<div class="subcategory-image-container">
</div>
</div>
<div class="subcategory-container">
<div class="subcategory-image-container">
</div>
</div>
<div class="subcategory-container">
<div class="subcategory-image-container">
</div>
</div>
</div>

我试图使圆圈Div按比例调整大小，使其保持长宽比。然而，这并没有发生。下面是图片

调整屏幕大小后的效果

它看起来像什么!

这个网格的宽度扩展了浏览器的宽度。我希望列和其中的内容根据浏览器屏幕的大小来调整大小。下面是我的代码。

.subcategory-main-wrapper {
display: grid;
grid-template-columns: repeat(4, max-content);
position: absolute;
bottom: 25px;
width: 100%;
column-gap: 4%;
justify-content: center;
height: 360px;
@media @tabletScreens{
height: 280px;
bottom: 12px;
}
@media @mobileScreens {
height: 450px;
bottom: 35px;
row-gap: 30px;
column-gap: 7%;
grid-template-columns: repeat(2, max-content);
}
}
.subcategory-image-container{
width: 278px;
height: 278px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

HTML:

<div class="category-container">
<div class="subcategory-main-wrapper">
<div class="subcategory-container">
{% if model.config.titleSubCategoryImageOne %}
<div id="image-1-{{model.id}}" class="subcategory-image-container">

</div>
<div class="subcategory-title">
<a href="{{model.config.subCategoryLinkOne}}">
{{model.config.titleSubCategoryImageOne}}
</a>    
</div>
</div>
</div>

请帮忙解决这个问题。我试过使用柔性显示器，但列也被挤压。然而，网格最适合所有屏幕尺寸，因为圆圈不会被挤压。

Answer 1

我为我的代码找到了解决方案。我改了下面一行从

grid-template-columns: repeat(4, max-content);

grid-template-columns: 20% 20% 20% 20%;和

.subcategory-image-container{
width: 100%;
height: auto;
aspect-ratio: 1/1;
border-radius: 50%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}