缩放图像以适应屏幕而不改变其纵横比答案

【问题标题】：Scale an image to fit the screen without changing its aspect ratio缩放图像以适应屏幕而不改变其纵横比
【发布时间】：2021-03-19 12:48:16
【问题描述】：

如何让图像在 CSS 中保持其纵横比的同时缩放屏幕？例如，如果我的图像比它的宽高，它的height 应该是100%（和width: auto;）。但是，如果图像比它高，它的width 应该是100%（和height: auto;）。

我可以在 CSS 中做到这一点吗？

如果height 和width 都是100%，那么图像就会像这样被挤压在一起：

如果height 和width 都是auto，则图像会正确缩放，除非它小于屏幕尺寸，然后它会在边缘留下空隙：

【问题讨论】：

【解决方案1】：

您可以使用object-fit: cover，这样可以确保图像不会丢失其纵横比。您还可以使用百分比值，例如 width: 70% 和 height: auto，以便在调整大小时缩小图像

【讨论】：