在网页端，我们经常想让图片能够自适应拉伸缩放，使之可以完美的嵌入我们给定的容器里，比如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实现图片自适应的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  3. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  4. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  5. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  6. css background之设置图片为背景技巧

    原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...

  7. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  8. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  9. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  10. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

随机推荐

  1. npm太慢， 修改npm镜像

    今天晚上想要将clone下来的项目进行npm install,但是等了半天都没动 查看源 npm config get registry 或 npm config list https://regis ...

  2. 从0移植uboot(六) _实现网络功能

    为uboot添加网卡功能可以让uboot通过tftp下载内核, 方便我们的开发, 对于网卡功能的移植,我们依然在在一遍又一遍的实践这个uboot改造的套路. 找运行逻辑,即插入代码的位置. 根据运行逻 ...

  3. ubuntu百度云下载大文件

    一.实验环境 ubuntu16.04 + 百度在线云盘 二.下载小文件步骤 小文件直接点击右侧的下载按钮即可,弹出文件保存对话框 三.大文件下载步骤 大文件使用如上方式下载时提示,请使用网盘客户端下载 ...

  4. java开学考试有感以及源码

    一.感想 Java开学测试有感 九月二十号,王老师给我们上的第一节java课,测试. 说实话,不能说是十分有自信,但还好,直到看见了开学测试的题目,之前因为已经做过了王老师发的16级的题目,所以当时还 ...

  5. react 简单的用函数调出ui显示

    import test from '../components/test' const info = () => { test.info('This is a normal message'); ...

  6. [Educational Round 3][Codeforces 609F. Frogs and mosquitoes]

    这题拖了快一周_(:з」∠)_就把这货单独拿出来溜溜吧~ 本文归属:Educational Codeforces Round 3 题目链接:609F - Frogs and mosquitoes 题目 ...

  7. JavaScript Promise：去而复返

    原文:http://www.html5rocks.com/en/tutorials/es6/promises/ 作者:Jake Archibald 翻译:Amio 女士们先生们,请准备好迎接 Web ...

  8. mac shell 获取ip，自动启动文件http服务

    因为工作原因,时常有文件传输需求. rz.nc.rsync都用过,各有各的好处. 但相对的,向别处推文件时总有各种麻烦,尤其是在给同事发送文件时. 然后就想到了提供http服务. 在环境变量中定义别名 ...

  9. _T宏的使用

    来源自百度.   他的作用是让你的程序支持Unicode编码, 因为Windows使用两种字符集ANSI和UNICODE, 前者就是通常使用的单字节方式, 但这种方式处理像中文这样的双字节字符不方便, ...

  10. html 中a标签的问题（无反应，跳转，调用方法）

    让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边     点击链接后不跳转可以设置成     1.<a href="javascri ...