纯css实现高度与宽度成给定比例的效果
2016-07-02 00:00
423 查看
摘要: 这个方法在IE8上需要添加额外的处理来让IE8支持background-size属性,在移动端表现稳定
这几天做一个列表,要求是在每一个item中的图片都能按照规定的比例显示.对于image标签来说,如果是自然的显示原图片的比例的话,
下面的css代码可以满足:( 在booststrap中,也是下面的写法)
可以设置的height属性的元素的高度基于包含它的块级对象的百分比高度。
当然,采用js的办法肯定是可以解决的,但是用了js后,总是有一个被强X的感觉,((⊙o⊙)…).不想用js怎么办.
文中作者采用的方法是利用了
而作者使用到了另一个属性
这样就能使用
40%就可以了.同时把
栗子如下:
点击这里查看效果
我们发现不论背景图片或者颜色是什么样,我这个元素始终按照4:3的比例显示
今日头条的wap首页的列表也采用的这种方法.点击查看 今日头条的wap站
基础知识十分重要啊!!!基础好+做的多,才会有思路.
7fe0
这几天做一个列表,要求是在每一个item中的图片都能按照规定的比例显示.对于image标签来说,如果是自然的显示原图片的比例的话,
下面的css代码可以满足:( 在booststrap中,也是下面的写法)
.img{ display: block; max-width: 100%; height: auto; }
前面的话
描述
但是现在要求不一样了,比如我要求每个图片必须按照比如4:3的比例显示出来,不用在乎图片是否被拉伸变形.这样的目的是实现图片的响应不同设备,保证图片等比例.如果仅仅通过width和height属性是不到的,即便height设置成百分比.可以设置的height属性的元素的高度基于包含它的块级对象的百分比高度。
当然,采用js的办法肯定是可以解决的,但是用了js后,总是有一个被强X的感觉,((⊙o⊙)…).不想用js怎么办.
解决
经过一番谷歌之后,还是找到了我想要的结果,参考的文章在最后.人家说的比我是详细,多多向人家学习~~文中作者采用的方法是利用了
padding-top/padding-bottom属性,根据他的解释,`padding'如果是百分比的话,那这个百分比是相对于其父元素的宽度而言的
而作者使用到了另一个属性
overflow,另外,在计算 Overflow 时,是将元素的内容区域(即 width / height 对应的区域)和 Padding 区域一起计算的。换句话说,即使将元素的 overflow 设置为 hidden,“溢出”到 Padding 区域的内容也会照常显示。
这样就能使用
padding-top/padding-bottom来代替
height属性了.比如你想要让元素的按在4:3的比例显示,
width设置成了30%,那么
padding-top/padding-bottom只需要设置成为
40%就可以了.同时把
height设为0.css代码如下:
.img-3-4 { margin: 10px; padding-bottom: 30%; width: 40%; height: 0; background-color: #dbe0e4; }
栗子如下:
点击这里查看效果
我们发现不论背景图片或者颜色是什么样,我这个元素始终按照4:3的比例显示
小结
到这里可以发现,要讲的不仅仅是图片img的怎么去按照固定的比例设置了,而是利用
padding将元素设置为固定比例,核心就是利用
padding属性的值是百分比的话,是以父级元素的
width走的.
padding真心十分好用,查阅一些资料,都说比
margin的问题要少.
今日头条的wap首页的列表也采用的这种方法.点击查看 今日头条的wap站
基础知识十分重要啊!!!基础好+做的多,才会有思路.
参考
纯CSS 实现高度与宽度成比例的效果7fe0