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

最新推荐文章于 2024-05-15 09:36:56 发布

诗渊

最新推荐文章于 2024-05-15 09:36:56 发布

阅读量1.7w

点赞数 2

分类专栏： CSS/CSS3 文章标签：保持宽高比

本文链接：https://blog.csdn.net/u014607184/article/details/52661760

版权

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