最小宽度和最大宽度不适用于div和图像

Question

我正在尝试将最小和最大宽度添加到className“ tile”，但是目前我在CSS中使用的宽度无效。一旦我的屏幕尺寸低于480像素，它就会从以下位置跳转：

至此：

高度保持不变，但是在调整屏幕大小时不会逐渐改变宽度。

@media screen and (max-width: 480px) {
 .tile {
    position: relative;
    height: 192px;
    padding-bottom: 12px;
    width: 100%;
}
.tile-image {
    height: 192px;
    margin-left: 24px;
    object-fit: cover;
    position: absolute;
    border-radius: 4px;
    max-width: 432px;
    min-width: 272px;
    z-index: 1;
}
.tile-gradient {
    background-blend-mode: darken;
    background-image: linear-gradient(228deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36));
    height: 192px;
    object-fit: cover;
    border-radius: 4px;
    z-index: 2;
    position: absolute;
    margin-left: 24px;
    margin-right: 24px;
    max-width: 432px;
    min-width: 272px;
 }
}

@media screen and (min-width: 481px) {
.tile {
    position: relative;
    width: 432px;
    height: 192px;
    padding-bottom: 12px;
}
.tile-image {
    width: 432px;
    height: 192px;
    margin-left: 24px;
    object-fit: cover;
    position: absolute;
    border-radius: 4px;
    z-index: 1;
}
.tile-gradient {
    background-blend-mode: darken;
    background-image: linear-gradient(228deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36));
    width: 432px;
    height: 192px;
    object-fit: cover;
    border-radius: 4px;
    z-index: 2;
    position: absolute;
    margin-left: 24px;
    margin-right: 24px;
 }
}

<div className="tile">
  <div className="image">
    <div className="tile-gradient"></div>
    <img className={`tile-image ${!post.availability && "is-available"} `} src={post.img} alt=""/>
  </div>
</div> 

关于如何解决此问题并使之响应的任何想法都很好，因此它不会从一次大小自动跳到另一个大小。预先谢谢您，请询问是否需要其他信息。

Answer 1

之所以会这样，是因为您没有使用屏幕宽度百分比来减小tile元素的宽度。在100%查询中进行设置时，它会直接从432px宽度更改为特定的@media screen and (min-width: 481px)。尝试避免特定的像素宽度，并按百分比进行调整。像

之类的东西

@media screen and (max-width: 480px) {
 .tile {
    position: relative;
    height: 192px;
    padding-bottom: 12px;
    width: 100%;
}
}

@media screen and (min-width: 481px) {
.tile {
    position: relative;
    width: 80%; // change this with the desired width of the element. Avoid using px
    height: 192px;
    padding-bottom: 12px;
}
}