设为首页收藏本站

星火云社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 651|回复: 0
收起左侧

[编程开发] css 实现image宽度百分百,高度跟宽度一样大小

[复制链接]
发表于 2019-7-19 11:48:43 | 显示全部楼层 |阅读模式
1、写两个div盒子,父子关系

<div class="image">
<img :src="food.image">
</div>

2、样式方面(less语法)

.image{
position: relative;
width: 100%;
height: 0px;
padding-top: 100%; //padding-bottom都可以
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

3、原理:外层div中,padding-top:100%;(padding-bottom)这个padding-top(padding-bottom)中的百分百是根据width去计算的,所以padding-top拿到了跟width一样的大小,又通过padding去填充了容器的高度,所以实现了div宽度百分百,高度跟宽度一样大小;内部img标签的position:absolute。使其成为块状元素,可以设置img宽高,均为外层div盒子的百分百,由此实现image宽度百分百,高度跟宽度一样大小

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则  允许回帖邮件提醒楼主

QQ|桌面版|收银台|手机版|小黑屋|站长简介|   

GMT+8, 2019-12-15 19:48 , Processed in 0.202053 second(s), 27 queries .

Powered by 星火云社区 X3.2!

我们一直在努力前进^_^

快速回复 返回顶部 返回列表