在网页端，我们经常想让图片能够自适应拉伸缩放，使之可以完美的嵌入我们给定的容器里，比如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. Lock 从来就没有成功过

    package lime.thinkingInJava._021._005._003; import java.util.concurrent.ExecutorService; import java ...

  2. makefile 常用函数

    Linux下编译c/c++源码需要编写makefile文件,文章参看 http://blog.sina.com.cn/s/blog_4c4d6e74010009jr.html 一函数的调用语法 二字符 ...

  3. mysql的某个数据库拒绝访问的问题

    场景: mysql自带的mysql和test库都可以正常连接. 新建一个数据库demo,配置java访问时报错:Access denied for user 'root'@'localhost' (u ...

  4. RxAndroid防止内存泄露

    RxJava并不会自动防止这种情况发生,好在它可以很容易地防止内存泄露.Observable.subscribe()方法会返回一个Subscription对象,这个对象仅仅有两个方法:isSbscri ...

  5. LeetCode - 768. Max Chunks To Make Sorted II

    This question is the same as "Max Chunks to Make Sorted" except the integers of the given ...

  6. 解决 nginx 出现 413 Request Entity Too Large 的问题

    1.若nginx用所用的 php 请求解析服务是 fpm, 则检查 /etc/php5/fpm/php.ini 文件中的参数 upload_max_filesize = 20M post_max_si ...

  7. YApi 部署记录

    YApi 是一个可本地部署的.打通前后端及QA的.可视化的接口管理平台. Step1:准备Mongo数据库 services: mongo: image: mongo restart: always ...

  8. PowerBI与Visio

    前言 如何在Power BI中使用Visio, 刚好最近微软推出了适用于Power BI 的 Visio自定义可视化对象预览,分享给大家. 我们先看一下效果:    通过自定义可视化对象,将Visio ...

  9. cs231n笔记（二） 最优化方法

    回顾上一节中,介绍了图像分类任务中的两个要点: 假设函数.该函数将原始图像像素映射为分类评分值. 损失函数.该函数根据分类评分和训练集图像数据实际分类的一致性,衡量某个具体参数集的质量好坏. 现在介绍 ...

  10. [LeetCode] Longest Substring Without Repeating Characters 最长无重复字符的子串

    Given a string, find the length of the longest substring without repeating characters. Example 1: In ...