自适应DIV

最新推荐文章于 2022-12-05 14:34:09 发布

罪无囚

最新推荐文章于 2022-12-05 14:34:09 发布

阅读量686

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq972618478/article/details/98993596

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

问题

这几天在做项目的时候遇到加载头像长宽不等的情况，由于写的自适应页面，又不能把宽高设置成固定值。于是出现以下情况，很丑对不对。
在这里插入图片描述

解决

我们知道，div的宽度用百分比很容易设置，可是高度往往是由内容填充的，那么让高度等于宽度不就行了吗？
用JS或JQ监听宽度改变时高度也改变可以很容易做到，可是能用css解决的问题就绝不用JS。
这就让我想到padding，margin的top，bottom，left，right了，这四个属性百分比的参考对象为其父容器的宽度。我么需要的正方形，margin不计入盒子的宽高，所以我们用padding。而我们有是要高度，所以用padding-top和padding-bottom；

用一张图简单明了的展示下：
在这里插入图片描述
为了验证这个想法做了以下测试：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<style>
    div {
        width: 30%;
        height:0; //将高度设置为0 防止高度被内容影响
        padding-bottom: 30%;
        background: red;
    }
</style>

<body>
    <div>
        <p>这是一个自适应的正方形</p>
    </div>
</body>

</html>

在这里插入图片描述
把padding-bottom换成padding-top

换成padding-top后内容被挤到了下面，因为文字排列是从上到下，从左到右的排列所以在加载padding-top后才加载文字，因此我们这两者并一样。
由于height设置成了0，其内部元素设置百分比宽高可能会出现问题，这是因为文档流的宽高参照的是父容器内容区的宽高。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<style>
    div {
        width: 30%;
        height:0;
        padding-bottom: 30%;
        background: red;
    }

</style>

<body>
    <div>
        <img src="./1.jpg" height="100%" width="100%" alt="">
    </div>
</body>
</html>

在这里插入图片描述
所以我们将div相对定位，img绝对定位，使img脱离文档流（float也可以，只要让他脱离文档流就行），这样他的参照就成了父容器的宽高（内容区 + padding）；
这样就能正常显示了

想法得到验证后再排版，是不是舒服多了，hhhhhhhhhhhhhh
在这里插入图片描述

罪无囚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应DIV

问题这几天在做项目的时候遇到加载头像长宽不等的情况，由于写的自适应页面，又不能把宽高设置成固定值。于是出现以下情况，很丑对不对。解决我们知道，div的宽度用百分比很容易设置，可是高度往往是由内容填充的，那么让高度等于宽度不就行了吗？用JS或JQ监听宽度改变时高度也改变可以很容易做到，可是能用css解决的问题就绝不用JS。这就让我想到padding，margin的top，bottom，l...
复制链接

扫一扫