文档章节

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

林祺泰
 林祺泰
发布于 2017/09/08 13:33
字数 522
阅读 4
收藏 0
点赞 0
评论 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
三分钟学会用 js + css3 打造酷炫3D相册

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

剽悍一小兔
01/10
0
0
菜鸟新手们得福音纯css菜单导航

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

天外飘雪
2012/09/21
0
0
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
05/15
0
0
使用纯CSS实现圆角边框并完美兼容

纯CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会有这篇文章呢,事情是这样的。在我们的以前的项目中,实现圆角框往往是用背景图片来实现的,但是,当这些项目发...

晨曦之光
2012/03/09
0
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2017/11/23
0
0
前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/Thefront-endtechnologypureCSStoachieveimagevertically 来自 : LM......

hosser
2015/05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(七)-添加自定义View和对其

CoreText进阶(七)-添加自定义View和对其 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更多...

aron1992
16分钟前
0
0
Python爬虫 爬取百合网的女人们和男人们

学Python也有段时间了,目前学到了Python的类。个人感觉Python的类不应称之为类,而应称之为数据类型,只是数据类型而已!只是数据类型而已!只是数据类型而已!重要的事情说三篇。 据书上说...

p柯西
27分钟前
0
0
在Java中,你真的会日期转换吗

1.什么是SimpleDateFormat 在java doc对SimpleDateFormat的解释如下: SimpleDateFormatis a concrete class for formatting and parsing dates in a locale-sensitive manner. It allows fo......

Java小铺
36分钟前
0
0
Linux系统梳理---系统搭建(二):tomcat的安装和使用

上一章讲到JDK的安装使用,这一章主要记录下服务器tomcat的安装以及部署一个项目. 1.下载tomcat,这里下载的是apache-tomcat-8.5.32.tar.gz 2.创建文件夹,便于管理,和JDK一样,在usr目录下创建t...

勤奋的蚂蚁
47分钟前
0
0
ES15-聚合

1.Terms Aggregation 分组聚合 2.Filter Aggregation 过滤聚合

贾峰uk
48分钟前
0
0
【2018.07.19学习笔记】【linux高级知识 20.27-20.30】

20.27 分发系统介绍 20.28 expect脚本远程登录 20.29 expect脚本远程执行命令 20.30 expect脚本传递参数

lgsxp
50分钟前
0
0
10.32/10.33 rsync通过服务同步~10.35 screen工具

通过服务的方式同步要编辑配置文件:[root@linux-xl ~]# vim /etc/rsyncd.confport=873log file=/var/log/rsync.logpid file=/var/run/rsyncd.pidaddress=192.168.43.21[tes...

洗香香
54分钟前
0
0
与女儿谈商业模式 (3):沃尔玛的成功模式

分类:与女儿谈商业模式 | 标签: 经济学 沃尔玛 陈志武 2007-05-10 09:09阅读(11279)评论(30) 与女儿谈商业模式 (3):沃尔玛的成功模式 陈志武 /文 沃尔玛(Wal-Mart)是另一个有意思的财...

祖冲之
今天
0
0
网页加载速度优化方法总结

1、减少请求 最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。 2、整合资源 对开发...

Jack088
今天
0
0
dubbo学习

https://blog.csdn.net/houshaolin/article/details/76408399

喵五郎
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部