zoukankan      html  css  js  c++  java
  • CSS图片宽度设置百分比 , 高度同宽度相同

    在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦。

    这里通过 css 来达到我们想要的效果:

    <div class='box'>
        <img src="...">
    </div>

    需要添加一个父元素来达到我们的目的。

    .box {
        position: relative;
         50%;
    }
    .box:before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    或者:

    .box{
        position: relative;
         50%;
        height: 0;
        padding-bottom: 50%;
    }

    我们在这里定义了一个伪元素并且将其 padding-top 设置为 100%,因为这里的 padding-top 是相对于元素的 width 的。

    现在我们定义了一个 .box 元素,它的长和宽是相等的,现在我们只需要设置 img 的 CSS 即可:

    .box img {
        position:  absolute;
        top: 0;
        left: 0;
         100%;
        height: 100%;
    }
  • 相关阅读:
    vc++ 编译器工具
    lesson 17 进程间通信 孙鑫 VC++
    VC++ msdn
    VC++ 相关问题
    MySQL
    Git
    Angular
    Linux
    阿里云服务器
    Git
  • 原文地址:https://www.cnblogs.com/licurry/p/10631629.html
Copyright © 2011-2022 走看看