CSS——background-size实现图片自适应
在网页端，我们经常想让图片能够自适应拉伸缩放，使之可以完美的嵌入我们给定的容器里，比如div,button,input，下面我将用代码来说明如何实现这个功能！
一、div背景图自适应
如果知道图片都有自身的大小尺寸，那我们如何把一张图片自适应缩放到一个给定大小的div里呢？这里只要用到background-size属性就可以了！
实例一：
代码用的原图大小为：159*113
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sdds</title>
<style>
.bg0
{
width: 318px;
height: 113px;/* 设置的div框的宽高*/
background: url(img/demo.jpg) no-repeat;
background-color: green; /* 加在url(img/demo.jpg)后面，这个颜色才有效，加在前面设置这个颜色属性无效*/ }
/* 图片自适应大小 */
.bg1
{
width: 500px;
height: 300px; /* 设置的div框的宽高*/
background: url(img/demo.jpg) no-repeat;
/* 以父元素的百分比来设置背景图像的宽度和高度。*/
background-size: 100% 100%;
}
</style>
</head> <body>
<div class="bg0"></div>
<div class="bg1"></div>
</body>
</html>
运行结果：
实例二：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sdds</title>
<style>
.bg0{
width: 159px;
height: 113px;
background: url(img/demo.jpg) no-repeat;
}
/* 图片自适应大小 */
.bg1
{
width: 500px;
height: 300px; /* 设置的div框的宽高*/
background: url(img/demo.jpg) no-repeat;
/* 以父元素的百分比来设置背景图像的宽度和高度。*/
background-size: 100% 100%;
}
</style>
</head> <body>
<div class="bg0"></div>
<div style="width: 800px; height: 600px; background-color: red;">
<div class="bg1"></div>
</div>
</body>
</html>
运行结果：
注：为了使图片自适应div大小，我们设置了 background-size: 100% 100%; background-size属性是以父元素的百分比来设置背景图像的宽度和高度。注意，由实例二可知，这里的父元素并不是背景色为红色的div，而是类名为bg1的div。类名为bg1的div才是设置的背景图片的父元素，我的理解是先设置了一个类名为bg1的div，然后再在这个div上嵌入了背景图像子元素。所以，类名为bg1的div是设置的背景图片的父元素。
二、button背景图自适应
button按钮可分为两种，一种是直接button标签的按钮，一种是button类型的input标签，两者差别不大，具体差别可自己网上查询。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
</head>
<body>
<!-- 原图 -->
<img src="img/qt_img/SA_4.png" />
<!-- button背景图 -->
<button style="width: 300px; height: 100px; background: url(img/qt_img/SA_4.png); background-size: 100% 100%;"></button>
<!-- input button类型背景图 -->
<input type="button" style="width: 300px; height: 200px; background: url(img/qt_img/SA_4.png); background-size: 100% 100%;" />
</body>
</html>
运行结果：
CSS——background-size实现图片自适应的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- css background之设置图片为背景技巧
css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- css控制div下图片自适应解决方法:图片不超过最大宽度
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
- css background之设置图片为背景技巧
原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css控制图片自适应大小
相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style ...
- css利用padding百分比实现图片自适应高度
应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...
随机推荐
- dedecms模板中 if else怎么写
在制作dedecms模板时,有时需要使用IF ELSE判断语句,但是dedecms模板中是无法使用使用IF语句的,否则会报错. 那么如何在dedecms模板中使用 if else呢?这就需要我们多走 ...
- 浅谈一下Windows下的用户权限
大学毕业后,选择做了苹果开发,一直是使用的Mac系统,所以对Windows的基本操作忘得几乎一干二净:因为做内网穿透的需要,要用到Windows下的权限问题,所以重新研究了一下Windows设置用户权 ...
- hbase region still in transition
1,删除hbase中的 hbase:meta表中相应的region的row 如; get 'hbase:meta','kylin_metadata,,1481101316881.f3b4c7c1148 ...
- Let's Encrypt泛域名SSL证书申请
操作系统:CentOS 7 github:https://github.com/Neilpang/acme.sh 有中文说明: https://github.com/Neilpang/acme.sh ...
- [git] 能在关键时刻救命的git指令
* 查看所有分支的所有操作记录(关键时刻能救命) git reflog
- JavaScript 事件绑定函数
function panTest(m_onClickFun) { var This = this; This.onClickFun = m_onClickFun; /* This.onClickFun ...
- Ubuntu系统安装nginx
1.首先查看linux系统 cat /proc/version Linux version 4.9.59-v7+ (dc4@dc4-XPS13-9333) (gcc version 4.9.3 (cr ...
- 怎么用js实现jq的removeClass方法
1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...
- PowerPoint使用技巧
1.右键Group两个元素,可以一起移动: 2.Insert 屏幕输入功能: 3.录制旁白: 4.录制完旁白之后可以生成视频: 5.如果不确定所有引用的组件是否可以在别的机器上使用,可以导出只CD,生 ...
- Linux学习5-CentOS安装Python3.6环境和pip3
前言 centos7 自带有 python,但是却是 python2 版本的 python,如果你想安装个python3怎么办呢? 如果直接删除python2的话,可能会引起其他的问题,因为有些东西是 ...