intrinsicsize实现图片恒定宽高比的属性

时间: 2019-06-11阅读: 155标签: 属性

开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。(这里假设图片是<img>元素,不是作为background,页面上要显示图片的宽高比与图片本身的宽高比并不一定相同。)

如果在移动端,图片通过rem或vm来设置宽高度就可以了,因为对于确定的设备浏览器的宽高是可以确定的。

而在PC端,可以随意的改变浏览器的大小,如果要保证图片的宽高比,用JS是一种方法,更常见的解决方案是在图片外层新增一个容器,并设置height为0,然后利用padding-top或padding-bottom来把盒子“撑高”,图片定位于容器左上角,宽高设为100%,有点hack的味道。

.outer {
  position: absolute;
  width: 100%;
  padding-bottom: 56.25%; /* 这里宽高比为16:9 */
  ...
}

.inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

padding-bottom的值即 (高度 / 宽度) * 100%,它的百分比是相对于盒子的宽度而不是高度。

如果使用属性intrinsicsize就很简单了

<img src="..." intrinsicsize="16x9" />

下面是对比,试着改变预览区大小,可以看到图片的变化是一样的https://jsbin.com/zoxixiwefa/

比较常用的场景是卡片式图片列表,比如下面是某直播平台的列表页,省略了一些CSS,分割线上是平台采用的padding方案,分割线下是用intrinsicsize属性https://jsbin.com/zazajazige/


原文来自:https://segmentfault.com/a/1190000019437573


链接: http://www.fly63.com/article/detial/3645

Css边框阴影:box-shadow属性

box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个或者多个阴影的属性。 语法:box-shadow: h-shadow v-shadow blur spread color inset. h-shadow: 阴影的水平位置 v-shadow:阴影的垂直位置 blur

CSS3中box-shadow属性

box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。

Vue中的computed

使用vue框架已经一年多的时间了,虽然踩了不少的坑,但是 有些错误是经常性的。正好利用现在的空余时间,对自己所学的,所用的东西进行整理,总结。避免下次在采坑,也希望自己的总结,能够带给别人一些启发。

Js枚举属性与for-in和for-of

首先要分清什么是可枚举属性,什么是不可枚举属性,在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。

vue里的$refs属性

vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录:

Vue之计算属性

模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护,在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时

PHP获取类私有属性的几种方式

反射可以获取类的详细信息,要获取私有属性的值,只需将对应属性的 ReflectionProperty 实例设置为可访问再取值即可。示例代码如下:

JS中轻松遍历对象属性的几种方式

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组

css3的calc属性不生效问题

css3的 calc:计算属性。由于自己做的项目中这个属性不常用到,偶尔用一次还没效果。后来研究了下是因为运算符两边没加空格。

Js对象的三个属性

每个对象都拥有三个特性(属性)(object attribute):对象的原型(prototype)。指向另外一个对象,本对象的属性继承自它的原型对象。对象的类(class)。是一个表示对象类型的字符串。对象的扩展标记(extensible flag)

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全