zoukankan      html  css  js  c++  java
  • CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 

    首先我们需要让背景图片在指定的DIV中全部填充显示 

    之前看有用类似 background-attachment: 的fix来实现背景图片的填充,但是,貌似是不能按照当前的DIV大小去填充。 


    我的情况是,宽度按照整个屏幕的百分比来调整,但是高度,又不能通过整个屏幕的高度百分比来调整,而也想通过宽度的百分比,即宽高比希望与背景图片的宽高比相等。 

    通过一下属性,先填充 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    background-image: url(../images/aaa.png); 

    然后通过对这个div的before添加样式 
    content: ""; 
    display: block; 
    padding-top: 100%; /* 代表1:1,如果是想要5:1就是20%,根据图片大小比例,那就自己算一下吧*/ 
    这块实际上做的就是用before占用一块位置,把相应的高度撑起来~ 


    然后里面就可以放任何东西了,当然,里面的东西要保持 
    position: absolute; 
        top: 0; 
        left: 0; 
        bottom: 0; 
        right: 0; 
    100%; 
    height:100%; 
    同时,上一层的position要是relative的,这样就可以保证,里面的内容刚刚好在背景图片这个区域了

  • 相关阅读:
    hdu 1201 18岁生日
    线性代数
    关于pymongo的一些说明
    利用数组进行数据处理
    通用函数:快速的元素级数组函数
    IPython:一种交互式计算和开发环境
    关于一道面试题的思考
    wireshark中的抓包过滤器和显示过滤器
    wireshark推荐书籍
    wireshark 找不到网卡的解决办法
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9359956.html
Copyright © 2011-2022 走看看