使用 CSS 调整图像大小以适合容器

Posted 2023-03-06

【中文标题】使用 CSS 调整图像大小以适合容器

【英文标题】：Image resizing with CSS to fit into a container

【发布时间】：2016-01-06 17:33:54

【问题描述】：

我正在寻找使用 CSS 调整 <img> 元素大小的解决方案：

横向和方形和纵向必须保持纵横比 图片 必须在高档（收缩）和低档（拉伸）场景中工作 除了 Chrome/FF/Safari/Opera 还必须在 IE 10/Edge 中工作（IE 8+ 支持很不错）

我在这里找到的所有解决方案（如this 或this）都不能按要求工作。使用 object-fit: contain 的 The best one 在 IE 中不起作用。没有javascript可以吗？

【参考方案1】：

您只需要为您的 img 元素设置一个最大宽度和最大高度。 如果你的图片比容器大，这个技巧应该以正确的比例调整你的图片大小。

我这里有一个例子：

img 
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: auto;

http://codepen.io/Himechi90/pen/MaoEWg

祝你好运！

【讨论】：

这在图像分辨率较低时不起作用，即需要拉伸以填充任何可用空间。

非常正确。这就是为什么我在评论中说“假设您的图像比容器大..”但是感谢您指出！