最小宽度和最大宽度不适用于 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元素的宽度。 当您在@media screen and (min-width: 481px)查询中设置时，它会直接从100%宽度更改为特定的432px 。 尽量避免特定的像素宽度并用百分比进行调整。 就像是

@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;
}
}

如果您使用百分比而不是特定像素，则在调整屏幕大小时会发生宽度的逐渐变化。