调整图片尺寸并保持浏览器缩放时的响应式效果

当然可以实现这个需求！你当前的代码已经具备了基础的响应式缩放能力，但如果想要在限制图片最大显示尺寸的同时，依然保持浏览器窗口缩放时的自适应效果，可以通过以下两种常用方法优化：

方法一：用max-width/max-height限制尺寸，保留原生比例缩放 #

这种方法最简单，适合想要限制图片最大尺寸，但允许窗口缩小时图片按比例自适应的场景：

修改你的CSS样式：

.wrap1 { 
  position: relative; 
  overflow: hidden; 
  /* 可选：给容器加居中，让图片在大窗口里不会撑满整个屏幕 */
  margin: 0 auto;
}
.img1 { 
  height: auto; 
  width: 100%; 
  max-width: 600px; /* 设定图片的最大宽度 */
  max-height: 400px; /* 对应图片的最大高度，和原图比例一致 */
}

原理说明： #

• width: 100%让图片在父容器宽度小于最大宽度时，自动占满父容器宽度，保持响应式；
• max-width和max-height限制了图片的最大显示尺寸，避免图片在大窗口里被过度拉伸；
• height: auto确保图片始终保持原始宽高比，不会变形。

方法二：用宽高比容器+object-fit精确控制显示区域 #

如果需要让图片始终保持固定的宽高比（比如不管原图比例如何，都要按设定的比例显示），可以用这种方法：

更新CSS（HTML结构无需修改）：

.wrap1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px; /* 容器最大宽度 */
  margin: 0 auto;
  padding-top: 66.67%; /* 这里是高度/宽度的比例，400/600≈66.67%，用来固定宽高比 */
}
.img1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选值：cover（填满容器，裁剪超出部分）/ contain（完整显示图片，留空白）/ fill（拉伸填充） */
}

原理说明： #

• padding-top的百分比是基于容器宽度计算的，这样能让容器始终保持你想要的宽高比；
• 绝对定位的图片会填满整个容器，object-fit属性可以控制图片的显示方式，既保证响应式，又不会让图片变形。

你的原始代码中，图片会直接占满父容器的宽度，当父容器宽度大于图片原始尺寸时，图片会被拉伸放大，这就是你觉得“直接设置height和width属性无法实现需求”的原因。上面两种方法都能解决这个问题，你可以根据实际需求选择~

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