如何设置图片仅在指定屏幕宽度区间响应式，超过阈值后停止缩放

调整方案 #

你可以通过给父容器和图片增加min-width、max-width限制实现效果，不需要额外引入媒体查询，调整后的完整代码如下：

<style>
    .left-main {
        flex: 30%;
        width: 30%;
        min-width: 90px; /* 对应屏幕300px时的父容器最小宽度：300px * 30% */
        max-width: 432px; /* 对应屏幕1440px时的父容器最大宽度：1440px * 30% */
        background-color: #ffffff;
    }
    .icon-position{
        margin-top: 200px;
        margin-left: 33.195%;
        width: 61%;
        height: auto;
        /* 兜底限制，避免父容器样式变更时效果失效 */
        min-width: 55px; /* 对应屏幕300px时的图片最小宽度 */
        max-width: 264px; /* 对应屏幕1440px时的图片最大宽度 */
    }
</style>
<div class = "left-main">
        <img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>

实现逻辑 #

• 屏幕宽度小于300px时，父容器和图片都固定为最小宽度，不会继续缩小
• 屏幕宽度在300px到1440px区间时，父容器随屏幕宽度按30%比例缩放，图片随父容器按61%比例同步放大
• 屏幕宽度大于等于1440px时，父容器和图片都固定为最大宽度，停止缩放

内容的提问来源于stack exchange，提问作者AIIMOOR