响应式网页中，如何只用CSS实现div的高和宽保持固定比例

2024-04-03 16:59:37

引言：

如果div里是<img>，原生就支持。

.item img {
float: left;
margin:5%;
width: 20%;
}

>>>>>>>>>>>>>>>demo1请点击<<<<<<<<<<<<<<

正文：

1、使用媒体查询。

@media only screen and (min-width: 100px) and (max-width: 640px) {
div{
width: 100px;
height: 100px;
}
}
@media only screen and (min-width: 641px) and (max-width: 789px) {
div{
width: 200px;
height: 200px;
}
}

2、利用padding-bottom是百分比值的话，参考的是父元素的width而不是height。

.item {
float: left;
background-color: darkslategrey;
border: 1px solid black;
margin: 5%;
width: 20%;
height: 0;
padding-bottom: 20%;
}

>>>>>>>>>>>>>>>demo2请点击<<<<<<<<<<<<<<

3、使用vw属性，他是参考整个viewport（视窗）的宽度【vw、vh、vmin、vmax是css3新属性，支持主流浏览器且IE10以上】

.item {
float: left;
background-color: darkslategrey;
border: 1px solid black;
margin: 5%;
width: 20vw;
height: 20vw;
}

>>>>>>>>>>>>>>>demo3请点击<<<<<<<<<<<<<<

参考资料：

【CSS中margin-top/bottom(padding-top/bottom)百分比为何以最近的块级祖先元素的宽度而不是高度作计算？】

最新文章

热门文章