css图片手机全屏显示 |css样式书写位置视频

/* 使图片全屏 */
img {
max-width: 100%;  /* 图片大小不超过容器 */
height: auto;     /* 根据比例自适应高度 */
display: block;   /* 去掉默认行内属性 */
}

这段 CSS 代码的作用是将图片最大宽度设置为 100%，保证图片大小不会超出其包含容器的大小。同时，使用height: auto;属性可以保证图片比例不被拉伸。最后，这个代码块使用display: block;去掉了图片默认的行内属性，这样图片才可以全屏显示。

/* 定义图片的背景大小 */
background-size: cover;
/* 让图片宽度和容器一样 */
background-size: 100% 100%;

如果你不想使用img标签来显示你的图片，你可以使用background-image属性来将图片和任意一个元素配合使用。然后可以通过background-size属性调整图片显示大小。若想让图片全屏显示，则可以使用cover填充方法。否则，你可以将属性值设置为 100% 100% 以保持图片与容器大小一致。

/* 为图片添加滤镜 */
filter: brightness(50%);
filter: sepia(100%);
filter: contrast(200%);

最后，你可以使用 CSS 的filter属性来对你的图片进行进一步的调整，在移动设备上增加视觉效果。例如，你可以使用brightness属性来调整图片亮度，使用sepia属性来添加一个暖色调的滤镜，或者使用contrast属性增加图片对比度等等。

这些 CSS 方法和属性可以帮助你轻松地将图片全屏显示在移动设备上。可以试着结合使用它们来达到你想要的效果。