我可以使用CSS按比例缩放DIV高度到其宽度吗? [英] Can I scale a DIV height proportionally to its width using CSS?
本文介绍了我可以使用CSS按比例缩放DIV高度到其宽度吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
可以设置css中的任何变量像我想我的div高度总是一半宽度我的div缩放与屏幕尺寸宽度为div是百分比
can i set any variable in css like i want my div height always half of width my div scales with the screen size width for div is in percent
<div class="ss"></div>
css :
.ss{
width:30%;
height: half of the width;
}
this 30% width scales with screen resolution
推荐答案
您可以在父项的填充的帮助下,因为相对填充(甚至高度方面)是基于元素的宽度。
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
有关详细信息,请参阅有关主题的文章
http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes- using-just-css /
For details, see this article on the subject http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/
这篇关于我可以使用CSS按比例缩放DIV高度到其宽度吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文