首页 >
css 等宽高比例 |markdown.css
文本弯曲css，css 美化table边框，css搜索框链接，es6 import css，css如何调用进flask里，css命名规范里面的span，markdown.css
div {
width: 50%;
padding-top: 50%;
background-color: #efefef;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}方法二：媒体查询
如果你想在不同的分辨率下使用不同的宽高比例，可以使用CSS的媒体查询。这种方法需要一些计算，但是它提供了更加灵活的控制。
代码演示：方法三：矢量图形 如果你需要创建一个精确的宽高比例，你可以创建一个矢量图形，然后使用CSS的background属性将其应用到元素上。 代码演示：div { position: relative; width: 50%; float: left; background-color: #efefef; } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 在小于768px的分辨率下，使用3:2的宽高比 */ @media (max-width: 768px) { div { padding-top: 66.66667%; } } /* 在大于768px的分辨率下，使用16:9的宽高比 */ @media (min-width: 769px) { div { padding-top: 56.25%; } }等宽高比例
.circle {
width: 50%;
padding-top: 50%;
background-color: #efefef;
background: url(https://cdn.pixabay.com/photo/2018/12/25/20/40/christmas-3896346_960_720.png) no-repeat center center;
background-size: contain;
}以上是几种实现CSS等宽高比的方法，你可以根据你的需求选择最合适的方法。