文档章节

纯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
三分钟学会用 js + css3 打造酷炫3D相册

中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的。整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者感受到学习的乐趣。我会尽可能讲得详细,不需要你...

剽悍一小兔
01/10
0
0
精选30个优秀的CSS技术和实例

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

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

通过Docker容器连接代理Wormhole

Wormhole 是一个能识别命名空间的由 Socket 激活的隧道代理。可以让你安全的连接在不同物理机器上的 Docker 容器。可以用来完成一些有趣的功能,例如连接运行在容器本机的服务或者在连接后创...

Linux就该这么学
19分钟前
1
0
从架构到平台, POWER 9处理器最全解读

本文根据IBM中国芯片设计部门高级经理尹文,在「智东西公开课」的超级公开课IBM专场《POWER 9-认知时代的驱动力》 上的系统讲解整理而来。 本次讲解中,尹文老师从内核微架构、总线互连、异构...

Mr_zebra
22分钟前
1
0
openjdk和oraclejdk有什么区别吗?

1.授权协议的不同:OpenJDK采用GPL V2协议放出,而SUN JDK则采用JRL放出。两者协议虽然都是开放源代码的,但是在使用上的不同在于GPL V2允许在商业上使用,而JRL只允许个人研究使用。 2.Open...

吴伟祥
23分钟前
2
0
c++基类析构函数要声明为virtual的原因

更深层的原因不知道,不过标准规定,如果不声明为virtual,那么将会导致未定义行为。个人测试结果表明,如果不声明为virtual,那么派生类的析构函数将不会得到调用

安非他命
30分钟前
1
0
CentOS 7下protobuf的源码编译安装

protobuf的github地址:https://github.com/google/protobuf支持多种语言,有多个语言的版本,本文采用的是在CentOS 7下编译源码进行安装。 github上有详细的安装说明:https://github.com/...

xtof
36分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部