在线效果体验：http://hovertree.com/texiao/mobile/3.htm

请使用手机浏览器查看。

css代码：

.bg{

background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

    background-size:100% 100%;

}

HTML文件代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>DIV缩放背景自适应(不变形)jQuery-HoverTree</title>

<style type="text/css">

a {

color: white;

}

body {

font-family: 幼圆,宋体,'Times New Roman', Times, serif;color:white;

}

.picwidth {

width: 100%;

text-align: left;

filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size: 100% 100%;

background-size: 100% 100%;

}

body {

margin: 0px;

background-color: #120c0c;

}

.content {

width: 206px;

margin: 0px auto;

padding-top: 10px;

line-height: 16px;

}

.frame {

width: 256px;

margin: 0px auto;

}

</style>

<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>

</head>

<body>

<div class="frame">

<div id="contentHead" style="height:231px;background-image:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg)" class="picwidth">

<input type="button" value="放大" id="keleyibig" /><input type="button" value="缩小" id="keleyismall" /><a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a>

</div>

<div id="contentBody" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree02.jpg);height:99px;color:White;" class="picwidth">

<div class="content">

今日人物：

<div style="text-align:center">谢霆锋</div>

<br />请点击放大,缩小按钮。

</div>

</div>

<div id="contentBottom" style="background-image:url(http://hovertree.com/texiao/mobile/3/hovertree03.jpg);height:124px" class="picwidth">DIV缩放背景自适应(不变形)

<br />请使用支持HTML5的浏览器查看本页

<br /><a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com">首页</a> <a href="http://keleyi.com">柯乐义</a> <a href="http://hovertree.com/hvtart/bjae/f43r3qry.htm">原文</a></div>

</div>

<script>

$(function () {

$(".frame").width(300);

var documentWidth = $(document.body).width();

if (documentWidth < 600)

$(".frame").width(documentWidth);

var cHead = $("#contentHead"); var cBody = $("#contentBody"); var cBottom = $("#contentBottom");

function setHeight() {

cHead.height(((cHead.width() / 320) * 289));

cBody.height(((cBody.width() / 80) * 31));

cBottom.height(((cBottom.width() / 64) * 31));

}

setHeight();

$("#keleyibig").on("click", function ()

{

$(".frame").width($(".frame").width() + 50)

setHeight();

})

$("#keleyismall").on("click", function () {

$(".frame").width($(".frame").width() - 50)

setHeight();

})

})

</script>

</body>

</html>

Web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

这张图可作为手机屏幕背景

CSS背景图拉伸不变形的更多相关文章

  1. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  2. CSS背景图拉伸自适应尺寸

    .bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...

  3. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  4. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  5. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  6. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  7. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  8. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  9. css背景图等比例缩放，盒子随背景图等比例缩放

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...

随机推荐

  1. Resource governor2：Configuration query

    SQL Server Engine 当前使用的configuration,称作 In-memory configuration,使用DMV:sys.dm_resource_governor_XXX查看 ...

  2. ExtJS4 源码解析（一）带项目分析

    Ext这个东东太大了,能看完就已经很不错了,完整的源码分析就不敢说了,大概就涉及了类管理,事件管理,数据结构缓存架构,UI组件核心机制,MVC这几个方面,只是挑着源码看的,没有实际完整的使用. 公司的 ...

  3. herbnate session.createSQLQuery(sql) 和 session.createQuery(sql)使用

    public class DistributeDao implements Serializable{ private SessionFactory sessionFactory; public Se ...

  4. C#中使用Redis不同数据结构的内存占有量的疑问和对比测试

    最近在大量使用Redis来进行数据统计前的清洗和整理,每天的数据量超5千万+,在开发过程中,数据量小,着重注意业务规则的处理,在上线基本测试后发现了大量的问题,其中之一就是Redis存储数据过多,内存 ...

  5. MongoDB一键式安装工具

    一. 需求 不知道有多少人会像我一样,会把MongoDB用在客户端应用上,不过我感觉应该非常少.于是,我就希望能在客户机器上尽可能简单方便的安装MongoDB.所以以下是我的一些取舍: 1. 我只使用 ...

  6. （转）运维角度浅谈MySQL数据库优化

    转自:http://lizhenliang.blog.51cto.com/7876557/1657465 一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架 ...

  7. CDH安装失败了，如何重新安装

    1> 删除Agent节点的UUID # rm -rf /opt/cm-5.4.7/lib/cloudera-scm-agent/* 2>  清空主节点CM数据库 进入主节点的Mysql数据 ...

  8. 【集合框架】JDK1.8源码分析之IdentityHashMap（四）

    一.前言 前面已经分析了HashMap与LinkedHashMap,现在我们来分析不太常用的IdentityHashMap,从它的名字上也可以看出来用于表示唯一的HashMap,仔细分析了其源码,发现 ...

  9. Git-TortoiseGit完整配置流程

    每次使用Git的时候都或多或少遇到些问题,为了方便以后少踩一些坑,把自己踩过的坑记录一下,加深对Git使用的理解,所以写下这篇日记记录一下. 本文需要频繁使用cmd,如果使用系统的cmd会稍微有点不便 ...

  10. ASP.NET MVC5中View-Controller间数据的传递

    使用ASP.NET MVC做开发时,经常需要在页面(View)和控制器(Controller)之间传递数据,那么都有哪些数据传递的方式呢? 本文对于View向Controller中传值共列举了以下几种 ...