CSS实现自适应下保持宽高比

最新推荐文章于 2024-09-08 09:55:18 发布

weixin_30639719

最新推荐文章于 2024-09-08 09:55:18 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wm218/p/9795894.html

本文介绍如何使用CSS技巧，使图片和div在网页缩放时保持原始宽高比不变，避免变形。核心是利用padding-top百分比与宽度百分比配合，确保元素按比例伸缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置width值，然后高度height设置auto。如果是div，我们该如何处理呢。

背景图片宽高比固定

下面，我仿照了移动端的聚划算网站中（https://ju.m.taobao.com/）中间一部分的布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度自适应</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
background-color: pink;
position: relative;
}
div:after{display:block;content: "";visibility: hidden;clear: both;}
div p{
float: left;
width: 30%;
padding-top: 35%;
margin-left: 3%;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
}
div p:nth-child(1){
background: url(images/banner1.jpg) no-repeat;
background-size: cover;
}
div p:nth-child(2){
background: url(images/banner2.jpg) no-repeat;
background-size: cover;
}
div p:nth-child(3){
background: url(images/banner3.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>

图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比，使其百分比与宽度的百分比为需要的比例。这里需要注意的是：padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的。

div宽高比固定

由于背景图片能覆盖包括padding在内的空间，但是如果需要在子元素中放置其他内容，会扩大子元素的高度，这时应该如何处理呢。为了让其不占用文档流空间，可设置其position：absolute；具体代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>高度自适应</title>
 6 <style>
 7 *{
 8 margin: 0;
 9 padding: 0;
10 }
11 .main{
12 width: 100%;
13 background-color: pink;
14 position: relative;
15 }
16 .main:after{display:block;content: "";visibility: hidden;clear: both;}
17 .main div{
18 float: left;
19 width: 30%;
20 position: relative;
21 padding-top: 35%;
22 margin-left: 3%;
23 border:1px black solid;
24 border-radius: 10px;
25 box-sizing: border-box;
26 }
27 .main div:nth-child(1){
28 background: url(images/banner1.jpg) no-repeat;
29 background-size: cover;
30 }
31 .main div:nth-child(2){
32 background: url(images/banner2.jpg) no-repeat;
33 background-size: cover;
34 }
35 .main div:nth-child(3){
36 background: url(images/banner3.jpg) no-repeat;
37 background-size: cover;
38 }
39 .p1{
40 position: absolute;
41 height: 100%;
42 width: 100%;
43 left: 0;
44 right: 0;
45 top: 0;
46 bottom: 0;
47 background-color: red;
48 overflow: hidden;
49 
50 }
51 </style>
52 </head>
53 <body>
54 <div class="main">
55 <div><p class="p1">图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比，使其百分比与宽度的百分比为需要的比例。这里需要注意的是：padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的</p></div>
56 <div></div>
57 <div></div>
58 </div>
59 </body>
60 </html>

为了能清楚的展示，我们把第一个div中的P元素背景色标记为红色，我们可以看到P元素的大小也能随着div的大小变化而变化。
---------------------
作者：诗渊
来源：优快云
原文：https://blog.youkuaiyun.com/u014607184/article/details/52661760?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/wm218/p/9795894.html