文档章节

纯css实现高度与宽度成比例的效果(转)

林祺泰
 林祺泰
发布于 2017/09/08 13:33
字数 522
阅读 4
收藏 0

这几天做一个列表,要求是在每一个item中的图片都能按照规定的比例显示.对于image标签来说,如果是自然的显示原图片的比例的话,
下面的css代码可以满足:( 在booststrap中,也是下面的写法)

.img{
    display: block;
    max-width: 100%;
    height: auto;
}

前面的话(描述)

但是现在要求不一样了,比如我要求每个图片必须按照比如4:3的比例显示出来,不用在乎图片是否被拉伸变形.这样的目的是实现图片的响应不同设备,保证图片等比例.如果仅仅通过width和height属性是不到的,即便height设置成百分比.

可以设置的height属性的元素的高度基于包含它的块级对象的百分比高度。

当然,采用js的办法肯定是可以解决的,但是用了js后,总是有一个被强X的感觉,((⊙o⊙)…).不想用js怎么办.

解决

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;
}

点击这里查看效果

小结

  • 到这里可以发现,要讲的不仅仅是图片img的怎么去按照固定的比例设置了,而是利用padding将元素设置为固定比例,核心就是利用padding属性的值是百分比的话,是以父级元素的width走的.
  • padding真心十分好用,查阅一些资料,都说比margin的问题要少.
  • 基础知识十分重要啊!!!基础好+做的多,才会有思路.

参考

纯css实现高度与宽度成比例的效果

本文转载自:http://www.jianshu.com/p/56a3adebdb01

共有 人打赏支持
林祺泰
粉丝 0
博文 17
码字总数 2143
作品 0
温州
纯css实现高度与宽度成给定比例的效果

这几天做一个列表,要求是在每一个item中的图片都能按照规定的比例显示.对于image标签来说,如果是自然的显示原图片的比例的话,下面的css代码可以满足:( 在booststrap中,也是下面的写法) 前面的...

小王JOJO
2016/07/02
6
0
一道CSS笔试题

如上图所示,屏幕正中间有个元素A,随着屏幕宽度的增加,始终需要满足以下条件: A元素垂直居中于屏幕中央; A元素距离屏幕左右边距各20px; A元素里面的文字“A”水平垂直居中; A元素的高度...

marginyu
2017/10/23
0
0
如何让DIV水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用...

ForingY
2016/06/26
11
0
精选30个优秀的CSS技术和实例

收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。 单击每...

晨曦之光
2012/03/09
0
0
菜鸟新手们得福音纯css菜单导航

最近jquery博客一直在加班,你妹的要晚上九点回去。 外面黑压压的一片,网速慢的出奇 百度谷歌下都不正常 哎 这个事咋整哦 没心情折腾了 整点东西吧 刚做前端的时候做的较多的是就是菜单导航...

天外飘雪
2012/09/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部