css盒子图片怎么添加

在网页中，我们经常需要添加图片来丰富页面内容。要让图片显示在我们想要的位置，我们可以使用CSS来控制盒子中的图片。

首先，我们需要在HTML中添加一个包含图片的元素，如下：

<div class="image-box">
  <img src="example.jpg" alt="示例图片">
</div> 

上述代码中，我们创建了一个class为“image-box”的div，并在其中嵌套了一个图片元素。src属性指定了图片的URL，alt属性为图片添加了一个有意义的文本描述。

接下来，我们可以使用CSS来控制这个盒子中的图片。我们可以使用以下代码来设置图片的宽度：

.image-box img {
  width: 300px;
}
 

上述代码中，我们使用了CSS选择器.image-box img来选取图片元素。然后，我们设置它的宽度为300像素。这将使这个图片在盒子中占据宽度为300像素的空间。

另外，我们可以使用以下代码来让图片居中显示：

.image-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
 

上述代码中，我们使用了CSS选择器.image-box来选取整个盒子元素。然后，我们将它的display属性设置为flex，这将使它内部的元素可以更好地进行排列。我们还使用了justify-content属性将它内部元素水平居中（也就是沿着x轴方向），同时使用了align-items属性将它内部元素垂直居中（也就是沿着y轴方向）。

通过使用上述CSS代码，我们就可以很轻松地控制一个盒子中的图片了。我们只需要根据需求设置不同的宽度和对齐方式即可。