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属性,引入图片。如果图片比容器盒子大,图片会自动调整尺寸,保证图片填满整个容器盒子。如果图片比容器盒子小,图片也会自动调整尺寸,以达到填满整个容器盒子的效果。