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

背景图片宽高比固定

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

高度自适应

*{

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;

}

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

div宽高比固定

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

高度自适应

*{

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;

}

为了能清楚的展示，我们把第一个div中的P元素背景色标记为红色，我们可以看到P元素的大小也能随着div的大小变化而变化。

---------------------

作者：诗渊

来源：CSDN

原文：https://blog.csdn.net/u014607184/article/details/52661760?utm_source=copy

版权声明：本文为博主原创文章，转载请附上博文链接！

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

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

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

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

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

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

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

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

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

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

CSS 图片自适应容器

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

CSS+DIV自适应布局

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

...

常见css垂直自适应布局(css解决方法)

css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box

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

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

随机推荐

探索c#之一致性Hash详解

阅读目录: 使用场景 算法原理 虚拟节点 代码示例 使用场景 以Redis为例,当系统需要缓存的内容超过单机内存大小时,例如要缓存100G数据,单机内存仅有16G时.这时候就需要考虑进行缓存数据分片, ...

nio 弊端

java-nio在Android上使用的种种弊端 August 12, 2013programming 我们知道,手机上的网络一般会比较慢(使用wifi除外),用户非常不希望自己在使用手机时被考验耐心 ...

简单设置，解决使用webpack前后端跨域发送cookie的问题

最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项 ...

HDFS的Shell

调用文件系统(FS)Shell命令应使用 $HADOOP_HOME/bin/hadoop fs 的形式. 所有的FS Shell命令使用URI路径作为参数. URI格式是scheme://author ...

北大ACM(POJ1012-Joseph)

Question:http://poj.org/problem?id=1012 问题点:约瑟夫环. Memory: 220K Time: 329MS Language: C++ Result: Acc ...

jmeter中webdriver插件，进行自动化压测

1.下载JMeterPlugins-WebDriver-1.1.2 2.将JMeterPlugins-WebDriver-1.1.2\lib\ext中的*.jar拷贝到D:\apache-jmeter ...

MVC Razor视图下ViewData传递html内容被转义

页面输出: html源码: