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

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

开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。(这里假设图片是<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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

css3的calc属性不生效问题

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

常用的CSS属性

页面渲染时,dom元素所采用的 布局模型,可以通过 box-sizing 进行设置,根据计算高度的区域可分为:content-box (W3C 标准盒模型),border-box (IE盒模型)

vue组件事件属性穿透

$attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好

CSS3的content属性详解

CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。

CSS属性white-space

本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。normal默认值,正常换行,空白和换行符会被浏览器忽略。啥意思呢?

word-wrap属性怎么设置文字自动换行?

可以在需要换行的元素内,将word-wrap属性的值设置为break-word来设置文字自动换行。下面本篇文章就来给大家介绍一下word-wrap属性,word-wrap属性设置或检索当内容超出其容器边界时是否中断单词

CSS box-sizing属性的正确用法

CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。默认情况下,元素的宽度和高度计算如下: width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着

CSS通过text-transform实现大写、小写和首字母大写转换

再日常项目中可能会用到一些特殊的样式,比如大写字母转小写、小写字母转大写、首字母大写等。可以通过 CSS 的 text-transform 属性来实现:

html中的marquee属性

该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签

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

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

点击更多...

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

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

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