html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏教程

容器长宽比，这个话题在站上也有相关的文章介绍，最早出现于Responsive Web Design中，主要用来处理img、iframe、video和object这些元素的自适应问题。简单点讲，就是根据容器的宽度，按照宽高比例自动计算出容器的大小。并且让图片，视频之类能自适应容器。另外记得在知乎上有一个问题“移动端布局，div按比例布局，宽度为百分比，但又想让高度和宽度一样，即让div为正方形，怎么做布局呢？”，其实解决方案在前面的教程已提到过：

既然有相应的解决方案，继续花时间来说，是不是有点多余。那么这个问题又回到了CSS的根源上：在Web中，使用CSS解决问题，往往不只有一种方案，只有更适合的方案。

这两天看到@Chris Coyier特意也整理了一篇《Aspect Ratio Boxes》文章，里面有新的方案值得我们思考，特别是CSS自定义属性的部分。那我们再次花时间将相关方案整理在一起，仅供学习与参考。

方案一：基于宽度的百分比

首先介绍的方案是基于容器width给padding一个百分比。这也是最早的一个方案。主要的原理是基于元素的padding-top或padding-bottom是根据元素的width进行计算的。假设你有一个div容器，它的宽度是500px，你想让其高度也是和宽度一样，也就是说宽高比例是1:1。这个时候借助padding-top或者padding-bottom的值为100%，就可以计算出容器div的高度是500px。

这种方案有一个必要条件，容器div的height为0，同时box-sizing为border-box，不然的话，容器不能带有border。现在我们可以想象一下，如果容器div的宽度又是一个百分比值，这样一来就可以保持容器高度跟宽度始一致。另外再想象一下，如果我们的padding-bottom或padding-top不是100%，而是56.25%，其实这就是一个完美的宽高比16:9，也就是9 / 16 * 100% = 56.25%。如此一来，你可以根据你自己的设计比来进行调整。

而这样的场景仅适合容器中放置背景图片：

.aspect-ratio-boxes{

overflow: hidden;

height: 0;

padding-top: 56.25%;

background: url(/images/happy-birthday.svg);

}

注：如果背景图片不是SVG文件，那还需借助于background-size或者object-fit来处理。比如设置为cover这样的值。

回到我们的问题中来，很多时候，我们的图片比例并不是和容器比例一样，比如在这个示例中，有可能不是16:9。就算是一个SVG，假设这个SVG的viewBox = "0 0 1127.34 591.44"，这也意味着它本质上是一个1127.34×591.44图像，它的比例是1127.34:591.44。或者说它也有可能是一个328×791的图形。

我想这种现象应该是很常见的，一个随机图像不一定符合预期的长宽比。那么问题就来了，对于一个任何长宽比，我们将如何实现？

任何可能的长宽比计算

对于固定的长宽比，比如16:9，它是完美的，我们也无需头痛。但事实上，往往并不如此，总是充满了随机性，这样也就表示比例也是随机性的。如果我们无法掌握

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏教程_W3cplus相关推荐

mysql 自定义哈希函数_C++ STL无序容器自定义哈希函数和比较规则（超级详细）...
前面在讲解 unordered_map.unordered_multimap.unordered_set 以及 unordered_multiset 这 4 种无序关联式容器(哈希容器)时,遗留过一个 ...
asp.net core自定义依赖注入容器，替换自带容器
依赖注入在asp.net core程序中,众所周知,依赖注入基本上贯穿了整个项目,以通用的结构来讲解,控制器层(Controller层)依赖业务层(Service层),业务层依赖于仓储层(Repos ...
利用Packer自定义镜像创建容器集群
阿里云容器服务Kubernetes集群支持CentOS操作系统,在绝大多数情况下可以满足客户的要求.但是有些客户由于业务系统对操作系统依赖比较高,希望定制化一些操作系统参数,则可以用自定义镜像来创建K ...
Html中如何自定义Video显示的长宽比
Html中如何自定义Video视频流显示的长宽比首先,这个问题是之前课题组有需要控制显示视频流的长宽比,更严格者需要针对双目摄像头裁切一半视频显示在网页上,期间找了很多的网上的解决办法,发现都没有人 ...
Docker网络——实现容器间通信、容器与外网通信以及容器的跨主机访问
前言自定义网络建议使用自定义的网桥来控制哪些容器可以相互通信,还可以自动DNS解析容器名称到IP地址.Docker提供了创建这些网络的默认网络驱动程序,你可以创建一个新的Bridge网络,Over ...
css居父容器下,整理：子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
多个容器一起打包_容器快速入门完全指南
介绍容器,以及Docker和Kubernetes之类的容器技术已经日益成为许多开发人员工具包中常见的工具.容器化的核心目标是提供一种更好的方式,以可预测和便于管理的方式在不同的环境中创建.打包以及 ...
C++primer第十一章关联容器 11.3关联容器操作 11.4 无序容器
11.3关联容器操作除了表9.2(第295页)中列出的类型,关联容器还定义了表11.3中列出的类型.这些类型表示容器关键字和值的类型. 对于set类型,key_type和value type是一样的 ...
C++primer第十一章关联容器 11.1使用关联容器 11.2 关联容器概述
关联容器和顺序容器有着根本的不同:关联容器中的元素是按关键字来保存和访问的.与之相对,顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的. 虽然关联容器的很多行为与顺序容器相同,但其不同之处反映 ...

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏教程_W3cplus

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏教程_W3cplus相关推荐

最新文章

热门文章

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏 教程_W3cplus

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏 教程_W3cplus相关推荐

最新文章

热门文章

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏教程_W3cplus

html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏教程_W3cplus相关推荐