css一张图片铺满手机屏如何不变形

CSS是网站设计中非常重要的一项技术，其中一种重要的应用便是美化页面中的图片。在手机端上，我们经常需要将一张图片铺满整个屏幕，但是在这个过程中也容易出现图片畸变的问题。今天，我们来看看怎样使图片在手机屏幕上铺满而不出现变形的情况。

/* CSS代码示例 */

/* 使图片占据整个屏幕 */
img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* 防止图片被压缩 */
@media only screen and (max-width: 480px) {
  img {
    max-height: 100vh;
    object-fit: cover;
  }
} 

我们可以通过设置CSS样式使得图片占据整个屏幕。具体做法就是设置图片的宽度为100%、高度为自适应，并且将其块级元素的属性设为display: block使其水平居中显示。然而，在手机端，这样设置容易出现图片被压缩变形的问题。

我们可以使用媒体查询（media query）的方式来限制手机屏幕的宽度，将图片的最大高度设置为100vh以保证图片不会变形。同时，使用object-fit: cover属性可以让图片自适应手机屏幕，并且保持比例不变。

通过以上步骤，我们可以轻松实现图片铺满手机屏幕而不变形，让网站在手机端更具有优秀的页面设计和显示效果。