HTML中不拉伸让图片占满屏幕的一半

要让一张图片在不拉伸的情况下占据屏幕的一半，可以使用CSS的background属性。

具体步骤如下：

1. 在CSS中设置背景图片样式，并设置background-size为cover：

body {
  background-image: url("your-image-url.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

2. 设置高度为50vh，将页面的高度分成100份，vh是视窗高度的百分之一，50vh表示页面高度的一半。

body {
  background-image: url("your-image-url.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 50vh;
}

这样就可以让图片占据屏幕的一半，同时保持不拉伸的效果。

如果要让图片居中显示，可以使用background-position属性。例如：

body {
  background-image: url("your-image-url.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 50vh;
  background-position: center;
}

这样就可以让图片在页面中垂直水平居中显示，并占据屏幕的一半。