css图片为页面宽度一半

今天我们来说一说如何使用CSS让图片的宽度为页面的一半。 首先，在HTML中插入图片的时候，要记得给它添加一个类名，方便我们在CSS中修改它的样式。比如：

这里的".half-width"就是我们为它添加的类名。 然后，在CSS中使用这个类名来修改图片的样式。我们可以使用"width"属性来控制图片的宽度。

.half-width {
  width: 50%;
}

这里的"50%"是相对于父元素的宽度，也就是页面的宽度。因此，这个样式会将图片的宽度设置为页面宽度的一半。 最后，为了让图片能够在不失真的情况下被缩放到一半，我们还需要在CSS中添加以下样式：

.half-width {
  max-width: 100%;
  height: auto;
}

这里的"max-width"属性保证了图片不会超过父元素的宽度，而"height"属性会自动计算出图片的高度，保证图片不失真。 以上就是使用CSS让图片的宽度为页面的一半的方法，希望对大家有所帮助。