如何按宽/高调整图片尺寸？适配250x250容器的CSS实现

这需求太常见了，用CSS的object-fit属性就能轻松搞定，完全符合你要的竖图按高度缩放、横图按宽度缩放的要求，而且不会让图片变形或者被裁剪。

实现步骤： #

1. 给图片容器设置固定的250x250尺寸，可选加个边框方便调试；
2. 给图片设置占满容器的宽高，再用object-fit: contain让图片按比例自适应，保证完整显示在容器内；
3. 搭配object-position: center让图片在容器里居中，视觉更美观。

完整代码示例： #

<!-- HTML结构 -->
<div class="product-image-container">
  <img src="你的竖版图片URL" alt="竖版产品图" class="product-image">
</div>
<div class="product-image-container">
  <img src="你的横版图片URL" alt="横版产品图" class="product-image">
</div>

/* CSS样式 */
.product-image-container {
  width: 250px;
  height: 250px;
  border: 1px solid #eee; /* 可选，方便看容器边界 */
  display: inline-block; /* 让容器并排显示，可选 */
  margin: 10px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 核心属性：按比例缩放，完整显示在容器内 */
  object-position: center; /* 图片在容器中居中 */
}

效果说明： #

• 竖版图片（高度大于宽度）：会自动缩放至高度填满250px，宽度按比例缩小，不会撑满容器宽度；
• 横版图片（宽度大于高度）：会自动缩放至宽度填满250px，高度按比例缩小，不会撑满容器高度；
• 正方形图片：刚好填满整个250x250容器。

这个方案兼容性也很好，现代浏览器都支持，不用写复杂的JS计算，纯CSS就能解决问题~

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