在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置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；具体代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>高度自适应</title>

 <style>

 *{

 margin: 0;

 padding: 0;

 }

 .main{

 width: 100%;

 background-color: pink;

 position: relative;

 }

 .main:after{display:block;content: "";visibility: hidden;clear: both;}

 .main div{

 float: left;

 width: 30%;

 position: relative;

 padding-top: 35%;

 margin-left: 3%;

 border:1px black solid;

 border-radius: 10px;

 box-sizing: border-box;

 }

 .main div:nth-child(1){

 background: url(images/banner1.jpg) no-repeat;

 background-size: cover;

 }

 .main div:nth-child(2){

 background: url(images/banner2.jpg) no-repeat;

 background-size: cover;

 }

 .main div:nth-child(3){

 background: url(images/banner3.jpg) no-repeat;

 background-size: cover;

 }

 .p1{

 position: absolute;

 height: 100%;

 width: 100%;

 left: 0;

 right: 0;

 top: 0;

 bottom: 0;

 background-color: red;

 overflow: hidden;

 }

 </style>

 </head>

 <body>

 <div class="main">

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

 <div></div>

 <div></div>

 </div>

 </body>

 </html>

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

CSS实现自适应下保持宽高比的更多相关文章

  1. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  2. 巧用padding让图片宽高比固定并自适应布局

    1.从上图知道原始图片大小是 800 * 250,即宽高比为 3.2: 2.html 及 css 代码如下, 可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之 ...

  3. css媒体查询aspect-ratio宽高比在less中的使用

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配   使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...

  4. 使用css让动态容器按固定宽高比显示

    需求:页面上有一个div的宽度是随着屏幕宽度的改变而改变的,但其宽高比始终是2:1,也就是当宽度是1000px时,高度为500px 分析:无论浏览器窗口如何改变,始终要让目标元素的宽高比保持2:1,我 ...

  5. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  6. CSS 图片自适应容器

    https://www.jb51.net/css/660677.html 经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式 我们马上就能想到,把width.height 设置为1 ...

  7. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  8. 常见css垂直自适应布局（css解决方法）

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  9. 加载的过程中图片变形了? --教你自定义自动适配图片宽高比的RatioLayout

    很多同行在开发中可能会遇到这样的问题,就是在加载图片的时候会出现图片变形的问题.其实这很可能就是你的图片宽高比和图片所在容器的宽高比不匹配造成的.比如说图片的宽为200,高为100.宽高比就是2,那么 ...

随机推荐

  1. response.Close、response.End、response.Flush区别

    今天在做文件下载功能用到的是response的方法,首先我们要了解这些方法的作用. 1.response.write():将信息写入http响应输出流. 2.response.Flush:向客户端发送 ...

  2. SQL模糊查询,sum,AVG,MAX,min函数

    cmd mysql -hlocalhost -uroot -p select * from emp where ename like '___' -- 三个横线, - 代表字符,可以查询 三个enam ...

  3. swiper插件使用技巧

    1.加载插件: <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href ...

  4. JavaScript函数-高阶函数

    JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. function add(x,y,f) ...

  5. IPC进程间通信---信号量

    信号量 信号量:信号量是一个计数器,常用于处理进程或线程的同步问题,特别是对于临界资源访问的同步.临界资源可以 理解为在某一时刻只能由一个进程或线程操作的资源,这里的资源可以是一段代码.一个变量或某种 ...

  6. 初学Node.js -环境搭建

    从毕业一直到现在都是在做前端,总感觉缺少点什么,java? PHP? .Net? 框架太多了,学起来不好掌握,听说node.js挺牛的,我决定把node.js好好的学一下.首先是环境的配置,这个配置真 ...

  7. 【linux基于Postfix和Dovecot邮件系统的搭建】

    一:PostFixe和Dovecot的简单介绍 Postfix postfix是Wietse Venema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件.postfix是Wietse Ven ...

  8. 【ntp时间校准配置】

    Ntp(网络时间协议)是一种可以通过TCP/IP网络传播,其架构模式可分为C/S(客户端/服务器),PTP(对等),broatcast(广播), mutilbrocast(组播),无论在任何系统或设备 ...

  9. 【php学习-5】

    mutil_query($result)){ //多查询 where } //执行查询 /* $result=$cone->query("SELECT * from test" ...

  10. HTML基础实例

    本节列举了一些简单的HTML例子,帮助大家更感性地认识HTML标签.是不是对一些标签还不熟悉?别担心,后面几个章节会有详细说明,先跑几个例子看看效果吧. HTML文档相关标签所有HTML文档必须以&l ...