使用CSS巧妙的让图片铺满整个div盒子模型

文章 已结 置顶 精帖 0 2.54w
无法显示用户头像
作者:ECode1024官方,责任编辑:ECode1024官方 5 钻石
发布于 2019-07-04
在前端页面开发过程中,有的时候我们需要将图片铺满整个外层div盒子模型,普通的做法是把img标签放入div中,但这样并不能实现铺满的效果,会留一些空白出来。使用CSS巧妙的让图片铺满整个div盒子模型,html代码如下: [pre] <div style="position: relative;height: 183px;margin: 0px auto;background: url(/images/img/v1.png) no-repeat;background-size: cover">           <cite style="width: 326px">                  最小外送员!泰半岁萌娃随父送外卖           </cite> </div> [/pre] 以上实现核心代码是: [pre] background: url(/images/img/v1.png) no-repeat; background-size: cover [/pre] 如果想让图片变成链接可点击,只需要把整个div放入一个a标签中即可,最终效果如下: img[https://newecode1024.oss-cn-hongkong.aliyuncs.com/83788085-0365-4792-a9d0-477a2441ac00.png]  [pre] 作者:ECode1024官方 来源:ECode1024网 [/pre]

声明:本文所有观点仅代表创作者本人,ECode1024系信息收集发布平台,ECode1024仅提供信息存储以及展示服务。若有侵权,请联系我们删除。
回复
  • 暂无任何回复,抢个沙发吧~~
推荐阅读
ECode1024 QQ交流群

打开手机QQ扫码加入 ECode1024 交流群

ECode1024 微信交流群

打开手机微信扫码关注 ECode1024 公众号