css盒子图片展开

在网页设计中，经常需要使用盒子展示图片。CSS的盒子模型可以很好地完成这项工作。

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

首先，我们创建一个div元素来包含图片。设定其宽度和高度，并设置背景颜色。在这个div元素中，我们使用padding属性来增加可视面积并为图像提供留白。

接下来，我们将图像的max-width和max-height属性设置为100%，这样可以使图像显示为其实际尺寸大小，并自动适应容器大小。

最后，我们将图像的display属性设置为block，以使其在页面中垂直居中。同时，我们使用margin:auto属性将图像水平居中对齐。

通过使用CSS的盒子模型，我们可以轻松地创建一个漂亮的图片展示效果。