css 图片自适应屏幕大小

作者：System 时间：2024年08月07日分类：所有,css 字数：461

这篇文章距离上次修改已过444天，其中的内容可能已经有所变动。

要使图片自适应屏幕尺寸，可以使用CSS中的max-width和height属性，并将width设置为100%。这样，图片会保持其原始宽高比，并且不会超过视口宽度。

下面是实现图片自适应屏幕宽度的CSS代码示例：




img {
  max-width: 100%;
  height: auto;
}

将此CSS规则应用到你的图片元素上，图片就会根据屏幕宽度自动调整大小。如果你希望图片始终完整显示，不被裁剪，可以使用object-fit属性：




img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 或者 cover，根据需求选择 */
}

object-fit: contain会保持图片的宽高比，并确保图片内容都可见，可能会有空白区域。object-fit: cover会裁剪图片以填充容器，但图片内容会被截断以适应容器。