css盒子大小贴合图片

CSS盒子大小贴合图片是网站前端设计中的一个重要问题。许多网站需要在页面中显示各种图片，如照片、插图、广告等，而这些图片的尺寸和比例千差万别，如果不加以处理，就会出现图片和盒子之间的空白、拉伸、挤压等情况，影响美观性和用户体验。

/* CSS样式代码 */
img {
  width: 100%;
  height: auto;
}
.container {
  width: 800px;
  height: 600px;
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
 

如上代码所示，通过设置标签的宽度为100%，高度自适应，图片就可以自动缩放，充满整个容器。同时，通过设置容器的宽度、高度、内边距、边框和盒模型等属性，可以确保图片和容器之间不会出现任何间隙。

此外，我们还可以通过CSS3的background-size属性，将背景图自动缩放至盒子大小。代码示例如下：

.container {
  background: url("bg.png") no-repeat center center fixed;
  background-size: cover;
}
 

如上代码所示，通过设置盒子的背景为图片，并设置no-repeat属性、水平和垂直居中、固定位置的基础样式，再通过设置background-size属性为cover，即可将背景图自动缩放并铺满整个盒子。

总之，通过合理的CSS样式和盒模型设置，我们可以轻松地实现图片和盒子的完美呈现，为用户带来更好的视觉感受和使用体验。