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

最新推荐文章于 2024-01-14 21:24:58 发布
最新推荐文章于 2024-01-14 21:24:58 发布
阅读量1.8k 收藏
点赞数
分类专栏： css

在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

效果如下：

这里写图片描述

图中三个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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

效果如下：

这里写图片描述

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

jquery实现宽高比固定

上面两个方法都是纯css方法实现的，如果借用JS（或jquery）来实现的话，可以随意设置div的宽高，下面介绍一下利用jquery来实现。首先我们设置div的宽度为百分比，然后通过jquery来设置高度值。当然，为了能使得div的高度能随着页面的大小变化而变化，还需要绑定一个resize事件。完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度自适应3</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:nth-child(1){
            float: left;
            width: 30%;
            position: relative;
            margin-left: 3%;
            border:1px black solid;
            border-radius: 10px;
            box-sizing: border-box;
            background: url(images/banner1.jpg) no-repeat;
            background-size: cover;
        }
        .main div:nth-child(2){
            float: left;
            width: 30%;
            position: relative;
            padding-top: 35%;
            margin-left: 3%;
            border:1px black solid;
            border-radius: 10px;
            box-sizing: border-box;
            background: url(images/banner2.jpg) no-repeat;
            background-size: cover;
        }
        .main div:nth-child(3){
            float: left;
            width: 30%;
            position: relative;
            padding-top: 35%;
            margin-left: 3%;
            border:1px black solid;
            border-radius: 10px;
            box-sizing: border-box;
            background: url(images/banner3.jpg) no-repeat;
            background-size: cover;
        }

    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        // 封装函数
        function setRatio(obj, ratio){
            var that = obj;
            var h = that.outerWidth()*(1/ratio);
            var borderWid = parseInt(that.css("border-top-width"))+parseInt(that.css("border-bottom-width")); // 考虑边框的宽度
            that.css("height",h+borderWid);
        }

        var obj = $('.main div').eq(0);
        var ratio = 6/7;
        setRatio(obj,ratio);

        $(window).resize(function(){
           setRatio(obj,ratio);
        });

    });
    </script>
</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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83

上述代码中，为了达到一开始的比例效果（一开始的效果是width：padding-top=30%：35%），我们加上了边框的宽度。主要思想就是先获取元素的宽度，然后再根据宽高比例计算并设置高度值，为了能随着页面变化，在resize事件中调用设置函数。元素的就能保证宽高比不变，并能随着页面变化自适应变化。

廿四桥明月夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 实现的图片宽高自适应固定边框
09-25
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
使用window.resize实现当浏览器宽度变化时触发相应函数
weixin_59742742的博客
07-04 568
如果我们有一个页面元素位置和宽高是根据其他页面元素的位置和宽高动态计算而成的，如果你实现的是响应式页面，那么该页面元素会随着浏览器窗口大小变化而变化它的大小位置，这时我们需要window.resize方法来实现动态响应式执行函数。该方法可以在窗口大小调整时触发一个函数。
JS及JQuery知识点
woaini886353的博客
04-28 1278
1.平滑滚动到页面顶部 我们以一个热门，实用的代码片段开始：下面的4行jquery代码，页面访问者通过点击id 为[#top]，滑动到页面的顶部； $(“a[href=‘#top’]”).click(function() { $(“html, body”).animate({ scrollTop: 0 }, “slow”); return false; }); 2.克隆表格的表头到表格底部 为了使自己的表格可读性更强，将表格的表头克隆到表格底部是个不错的注意。下面就是这个实用的代码片段。 var $tfoo
利用$(window).resize()实现窗口大小自适应宽度问题
allen88的专栏
12-15 533
问题描述：利用iframe做页面引入，用(window).resize()作自适应;结果窗口变小时，利用(window).width()获取到的宽度总是小于浏览器宽度，在左边留下17px宽度的白条。问题分析：在页面大小发生变化时，如果高度减小时，此时会出现滚动条，$(window).width()获取的宽度为减去滚动条之后的宽度，又因为iframe默认靠右，因此左边会出现空白。解决方案：判断当页面高度减小时，将宽度设置为$(window).width()加上滚动条(默认17px)的宽度即可。
window.onresize与$(window).resize()
热门推荐
淡定如斯的博客
11-29 6万+
window.onresize 是直接给window的onresize属性绑定事件，只能有一个。也就是说后面的会覆盖前面。例如：window.onresize = function(){ console.log("1") } window.onresize = function(){ console.log("2") }当浏览器窗口大小发生改变时，控制台只会打印 2。
$(window).resize() 执行延迟
weixin_34220623的博客
05-18 1410
问题 $(window).resize() 是监听窗口大小缩放，而后执行动作。最近在用echarts报表时，发现表报的缩放跟不上窗口的缩放节奏，比窗口的缩放总是慢一步。代码 $(window).resize(function(){ myChart.resize(); }); 解决 加个时间，延迟执行就好了 var timer = 0; $(wi...
CSS实现自适应宽度的菜单按钮效果代码
09-25
主要为大家介绍了CSS实现自适应宽度的菜单按钮效果代码,实例分析了css针对页面自适应宽度的相关设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
CSS实现的图片宽高自适应固定边框
09-25
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
CSS实现宽高等比自适应容器的方法
12-13
于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。 这里先以高度为宽度一半为例，也可以是其他任意比例 。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没...
html 怎么让背景图铺满整个页面
AMU的博客
03-12 5万+
为了让背景图片铺满整个页面，我们可以这样设置
linux窗口的自适应问题,利用$(window).resize()实现窗口大小自适应宽度问题
weixin_32821695的博客
05-14 1091
© 版权声明：本文为博主原创文章，转载请注明出处问题描述：利用iframe做页面引入，用$(window).resize()作自适应；结果窗口变小时，利用$(window).width()获取到的宽度总是小于浏览器宽度，在左边留下17px宽度的白条。代码如下：// 自适应主页面大小$(window).resize(function () {initSize();}// 初始化主页面大小functi...
JQuery中的事件
sunset_bo的博客
05-30 180
JQuery中常用的事件
html 调整div 高度,实现div可以调整高度（div实现resize）
weixin_29451671的博客
06-15 3164
实现div可以调整高度(div实现resize)一、div 实现resize(类似textarea)代码如下：div实现textarea效果#textarea {height: 200px;width: 300px;padding: 4px;border: 1px solid #888;resize: vertical;overflow: auto;}#textarea:empty:before ...
css图片保持比例and图片占满整个div
qq_43667537的博客
11-01 3590
要使背景图像保持其纵横比，我们需要将background-size属性设置为“cover”，这将确保整个背景图像可见，而不会发生拉伸或压缩。有时候，我们需要将图像设置为元素的背景，而不是使用元素。contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域。cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；object-fit:cover 会占满div，会产生一个图片的裁剪。在no-repeat情况下，如果容器宽高比与图片宽高比不同，
前端学习（十三）CSS margin的使用
y1yo2的博客
08-23 285
margin是设置对象外边距外延边距离。 margin的值有三种情况， 可以为正整数和负整数并加单位如PX像素（margin-left:20px）； 可以为auto自动属性(margin-left:auto 自动)； 可以为百分比（%）值（margin-left:3%）。单独设置四边间距属性单词： margin-left 对象左边外延边距 （margin-left:5px; 左边外延距离5
【CSS】保持元素宽高比
最新发布
lynnhgwang的博客
01-14 639
保持元素的宽高比，在视频或图片展示类页面是一个重要功能。本文介绍其常规的实现方法。
css宽高自适应
YY的博客
09-20 1万+
css宽高自适应
css 设置图片的等比例宽高比
weixin_68237499的博客
08-09 1254
在响应式网页设计中，保持一致的宽高比，即所谓的长宽比，对于防止布局累积偏移至关重要。在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中推出了 aspect-ratio 属性，我们有了更直接的方法来实现这一目标。
【CSS】实现长宽比的几种方案
weixin_42910765的博客
03-31 436
这是最早提出的一种实现方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。调整替换后的内容大小，以填充元素的内容框。cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。none - 不对替换的内容调整大小。
图片加载前的占位高度预设纯CSS实现（自适应屏幕的高宽比）——CSS黑魔法
05-25
可以通过以下纯CSS实现图片加载前的占位高度预设： 1. 首先，为图片容器设置一个固定的高度和宽度，例如： ```css .image-container { width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9的高宽比 */ position: relative; } ``` 其中，padding-bottom的值是根据图片的高宽比计算得出的。例如，如果图片的高宽比为16:9，则padding-bottom的值应为56.25%（9除以16乘以100）。 2. 接下来，在图片容器中添加一个伪元素，并设置其背景颜色为占位颜色，例如： ```css .image-container::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f1f1f1; /* 占位颜色 */ } ``` 这样就可以在图片加载前显示一个占位颜色的矩形，占位矩形的高度和宽度与图片容器相同。 3. 最后，将图片设置为绝对定位，并将其宽度和高度设置为100%，例如： ```css .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` 这样，当图片加载完成后，它会填满整个图片容器。而在图片加载前，占位矩形会占据整个图片容器的高度和宽度，从而保持了容器的高宽比。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值