文档章节

纯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
进度条的2种实现方式1.js 2.纯css

Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。感觉描述得有点...

筱飞
01/11
0
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
不可思议的纯 CSS 滚动进度条效果

结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,...

chokcoco
01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

远程获得的有趣的linux命令

使用这些工具从远程了解天气、阅读资料等。 我们即将结束为期 24 天的 Linux 命令行玩具日历。希望你有一直在看,如果没有,请回到开始,从头看过来。你会发现 Linux 终端有很多游戏、消遣和...

Linux就该这么学
11分钟前
0
0
Apollo配置详细步骤(Windows环境)

一. 准备工作 1.下载 apollo 安装包 下载链接:http://activemq.apache.org/apollo/download.html 2.下载 java JDK 安装包 ( apollo 依赖 java 环境) 下载链接:http://www.oracle.com/techn......

morpheusWB
32分钟前
0
0
聊聊flink的AsyncWaitOperator

序 本文主要研究一下flink的AsyncWaitOperator AsyncWaitOperator flink-streaming-java_2.11-1.7.0-sources.jar!/org/apache/flink/streaming/api/operators/async/AsyncWaitOperator.java ......

go4it
58分钟前
1
0
Java并发编程基础(四)

ThreadGroup 在主线程创建得线程,如果没有给他指定线程组,那么创建的线程,默认和主线程同一个线程组。线程组可以底下可以是线程,也可以实线程组。 构建线程组的方法: private ThreadGr...

chendom
今天
2
0
Scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部