CSS让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;
width:100%;
height:100%;
同时,上一层的position要是relative的,这样就可以保证,里面的内容刚刚好在背景图片这个区域了
CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)的更多相关文章
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- 微信小程序学习点滴《十二》:图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{i ...
- css背景图等比例缩放,盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- css 如何实现图片等比例缩放
在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...
- css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”
一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- 让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (转载)让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- cytoscape.js在vue项目中的安装及案例
1. 安装: npm i cytoscape --save 2. 引入:main.js import cytoscape from 'cytoscape'; Vue.prototype.$cytosc ...
- golang 切片和数组在for...range中的区别
切片是引用类型,而数组是值类型,并且for...range有以下规则: range表达式只会在for语句开始执行时被求值一次,无论后边会有多少次迭代 range表达式的求值结果会被复制,也就是说,被迭 ...
- 设置多台机器linux服务器ssh相互无密码访问
在每台服务器上都执行ssh-keygen -t rsa生成密钥对: $ ssh-keygen -t rsa Generating public/private rsa key pair. Enter ...
- Apache JMeter的基本使用
安装 安装地址:http://jmeter.apache.org/download_jmeter.cgi 解压后运行jmeter.bat的批处理文件就可以了 JMeter测试脚本编写: 1,创建线程组 ...
- CI框架入门笔记
当前(2019-03-22)CodeIgniter 框架的最新版本是 3.1.5,于2017年6月发布,距今快两年了也没有更新,这与 Laravel 的更新速度相比差距太大了.因为确实,它是一个很古老 ...
- centos7 完整配置openvpn详情教程
1. 什么是OpenVpn OpenVPN 是一个用于创建虚拟专用网络加密通道的软件包,最早是由James Yonan编写的.OpenVPN允许创建的VPN使用公开密钥.电子证书.或者用户名/密码来进 ...
- spring + mybatis 存取clob
存的时候会比较麻烦,需要使用select for update的方式更新数据,如果原来没有这一条数据,还需要先新增,新增的时候需要将clob字段存为oracle.sql.CLOB.empty_lob( ...
- Python动态变量名定义与调用
动态变量名赋值 在使用tkinter时需要动态生成变量,如动态生成var1...var10变量 使用exec动态赋值 exec在python3中是内置函数,它支持python代码的动态执行. 示例: ...
- windows线程退出的方法
线程的handle用处: 线程的handle是指向“线程的内核对象”的,而不是指向线程本身.每个内核对象只是内核分配的一个内存块,并且只能由内核访问.该内存块是一种数据结构,它的成员负责维护对象的各种 ...
- Spring mvc 4系列教程(一)
一.Spring框架概览 Spring框架是一种轻量级.一站式解决企业级应用的解决方案.不仅如此,Spring的模块化的特点,可以使你只引用所需要的部分,而无需引用全部.你可以使用控制反转容器(IoC ...