css如何让图片全屏手机

在网页设计中，有时候我们希望图片能够在手机端全屏显示，而不受限于原本的尺寸。CSS 提供了一种简单的方法来实现这个目标。 首先，在你的 HTML 代码中添加一个 img 标签，然后为其设置一个类，比如“full-screen-image”。接着，在你的 CSS 代码中添加如下样式定义：

.full-screen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这个样式定义会将图片的宽度和高度都设置为 100%。这样，图片就会根据设备的屏幕尺寸来自动调整大小，让其充满整个屏幕。同时，我们使用了 object-fit 属性来控制图片在容器中的显示方式。 object-fit 属性有以下几个选项： - fill：拉伸图片以填充整个容器，可能导致图片变形； - contain：保持图片原比例，尽可能显示整张图片，并铺满整个容器； - cover：保持图片原比例，尽可能显示整张图片，并铺满整个容器。如果图片的宽高比例与容器不同，图片会被裁剪。 所以，我们使用 object-fit: cover; 就可以让图片在容器中铺满，而不会拉伸或变形。当然，如果你希望图片原比例完整显示在容器中，可以使用 object-fit: contain;。 最后，如果你希望图片在手机端自适应大小，可以在页面头部添加以下 Meta 标签：

这个标签告诉浏览器，页面宽度应该等于设备宽度，并根据屏幕的 DPI 缩放页面元素。 综上所述，通过设置图片类名和使用 CSS 样式，我们可以让图片在手机端自适应大小，并全屏显示。让你的网页更加美观，也提升了用户体验。