CSS:让图片保持长宽比自适应缩小放大解决方案

原理：width height 的百分比表示方式都是以父元素的宽度长度为参照的（前提：父元素必须设置宽度和长度）

而padding的百分比表示方式是以 width的值为参照的。

例如：width设置为100px padding设置为10% 则10%表示padding =width * 10% 即10px；

所以，我们可以不设置div容器的高度，只设置宽度，然后用padding-top来撑起高度。只要宽度和padding-top保持一定的比例即可。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.aspectration {height:auto; width: 100%; background:url(1.png);background-size:100% 100%;}.aspectration[data-ratio="16:9"] {padding-top: calc(100% * 9 / 16);}.main{width:20%;}</style>
</head><body><div class="main"><div class="aspectration" data-ratio="16:9"></div><div><input type="checkbox">站点信息</div></div>
</body>
</html>

CSS:让图片保持长宽比自适应缩小放大解决方案相关推荐

css鼠标图片hover移入移出缓慢放大缩小
css鼠标图片hover移入移出缓慢放大缩小 /* transition 别放hover里,放到img里,这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */.image{width: 10 ...
java对图片任意大小的缩小放大操作
代码如下: package relevantTest; /* * 该类实现了对图片的任意大小的缩放处理,滚动鼠标滚轮对图片进行缩放处理,图片的高度和宽度最好不要超过屏幕的宽高 */ import ...
html图片自动在div里放大,css图片自适应div大小怎么做
css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性.不管是pc端还是移动端,或者是自适应网站,使用max-wid ...
html图片缩放全部显示不全,100% width CSS 在缩小/放大窗口时候内容被截断或显示不全...
故障现象: 当我们在写代码的时候如果,页面头部(#header )样式定义使用了100%宽度,那么当我们把浏览器窗口缩小的时候就会发现有部分内容被截断或显示不全: 原因分析: 当窗口缩小时,浏览器默认 ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
css来回摆动,css3 animation(左右摆动) (放大缩小)
左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...
通过css实现图片过渡放大的效果
通过css实现图片放大效果 css3当中有一个是过渡属性是transition,他要配和scale来使用,transition:scale(),这个括号里面填写数字,如果大于1,就是放大,如果小于1, ...
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动思路1:移动放大缩小操作都直接放到图片上面图片的放大缩小使用transform的scale属性操作,移动使用tran ...
javascript实现对图片的随意拖拽,放大缩小
[JS]基于javascript实现对图片的随意拖拽,放大缩小最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小,双击图片恢 ...

CSS:让图片保持长宽比自适应缩小放大解决方案

CSS:让图片保持长宽比自适应缩小放大解决方案相关推荐

最新文章

热门文章

CSS:让图片保持长宽比 自适应缩小放大 解决方案

CSS:让图片保持长宽比 自适应缩小放大 解决方案相关推荐

最新文章

热门文章

CSS:让图片保持长宽比自适应缩小放大解决方案

CSS:让图片保持长宽比自适应缩小放大解决方案相关推荐