css盒子怎么放图片

CSS是构建网页布局和风格的重要工具，我们可以使用CSS来设置盒子的样式和放置图片。下面，我们将介绍如何使用CSS在盒子中放置图片。

.box {
  width: 300px;
  height: 200px;
  background-color: #eee;
  padding: 10px;
}
.box img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
 

步骤：

1. 创建一个盒子，使用CSS设置盒子的大小、背景颜色和内边距。
2. 在盒子内部设置img标签的样式，使用max-width和max-height属性设置图片的最大宽度和高度为盒子的100%。
3. 使用display属性将img标签设置为块级元素，以便使得margin: 0 auto属性对其生效。这将使图片在盒子中居中显示。

上述CSS代码将创建一个大小为300x200像素的盒子，背景颜色为浅灰色，并在盒子中心放置一张图片。这张图片的最大宽度和高度均为盒子的100%。

总而言之，使用CSS在盒子中放置图片非常简单。只需遵循上述步骤，即可轻松在盒子中添加图片，并使其在盒子中居中显示。