淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中,图片的填充通常是用background-image属性来实现,但有时候我们需要把图片放在img标签里,并让它自动填充满整个容器盒子。这时候我们可以用CSS的背景位置和尺寸属性来实现。

.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}

以上代码中,我们首先定义.box为一个容器盒子,设置它的宽度和高度,overflow属性为hidden,让它隐藏盒子中超出部分的内容。然后为img标签设置position为absolute,让它脱离文档流,top和left为50%,让它在盒子中垂直和水平居中。接下来使用transform属性,将img标签向上向左偏移50%的距离,达到让它在盒子中居中的效果。最后通过设置min-width和min-height为100%来让图片自适应盒子,并实现自动填充整个盒子的效果。

要让以上代码生效,还需要给img标签设置src属性,引入图片。如果图片比容器盒子大,图片会自动调整尺寸,保证图片填满整个容器盒子。如果图片比容器盒子小,图片也会自动调整尺寸,以达到填满整个容器盒子的效果。