css 控制图片的横竖比例

大概你也遇到过"图片高度是宽度50%"这的需求
这需求看起来简单, 其实却非常麻烦

因为元素的宽高的百分比是相对于父元素的宽高计算的
所以直接设 width, height 是不符合预期的

.div {width: 100%;height: 50%;
}

而且一个空 display: block 元素 height 的默认值是 0px; 如果父元素没设 height 的话, 该元素的 height 就是 0px

如果是位置比较浅的元素, 其实可以用 css3 的新单位 vw, vh 来实现

.img {width: 100vw;height: 50vw;
}
.img {width: 100vh;height: 50vh;
}

但如果是位置比较深的元素, 那么比率就会难以计算
vw, vh 也难以实现这个需求

这个时候我们就可以利用 padding 了, 因为 padding 的百分比是相对于父元素的宽计算的, 这样纵向和横向就能统一

.div {width: 100%;padding-bottom: 50%;height: 0;
}

目前我们已经可以实现固定横竖比例的元素
结合 position: relative; position: absolute; 就可以拓展到固定横竖比例的图片

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>css 控制图片的横竖比例</title><style>* {outline: 1px #f00 solid;}.ratioImg {width: 50%;height: auto;/* 高度自动; 宽度自定义 */}.ratioImg__box {width: 100%;padding-bottom: 50%;position: relative;height: 0;}.ratioImg__box__img {position: absolute;top: 0;left: 0;/* bottom: 0; *//* right: 0; *//* margin: auto; */display: block;width: 100%;height: 100%;}</style>
</head><body><div class="ratioImg"><div class="ratioImg__box"><img class="ratioImg__box__img" src="https://profile.csdnimg.cn/F/A/9/3_u013970232" /></div></div>
</body></html>

//end

css 控制图片的横竖比例相关推荐

html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳.那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
css 控制图片最大宽度
CSS 限制图片最大宽度 (本文来自本站原创,转载请务必注明出处!) 我们在制作一个网页的时候,经常要对一个区域里可能出现的图片的宽度进行限制,不然它可能会把页面撑得很烂很烂. 如果你采用固定宽度,长 ...
html中div图片大小,如何用DIV+CSS控制图片大小范围？
牧羊人nacy 使用CSS max-width和max-height实现图片自动等比例缩小很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就 ...
CSS控制图片大小、边框、对齐方式、文字环绕
CSS操作图片大小 width属性和height属性可以用于定义图片大小. width属性和hieght属性的属性值都是像素. CSS操作图片边框 border-width属性用于定义<img& ...
CSS控制图片等比例缩放
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
科讯首页css,科讯CMS纯CSS控制图片最大宽度
关键字描述:最大图片控制 &nbsp 这个 var // 宽度 maxwidth if 科汛CMS官方模板中自带了一段JS用来控制文章中的图片的最大高度和宽度.不过我也很奇怪,为什么这个j ...

css 控制图片的横竖比例

css 控制图片的横竖比例相关推荐

最新文章

热门文章