在线效果体验：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. MongoDB 文档的查询和插入操作

    MongoDB是文档型数据库,有一些专门的术语,和关系型DB相似,但也有差异,例如,Collection类似于关系型DB的Table,document类似于row,key/value pair类似于c ...

  2. Entity Framework Code First执行SQL语句、视图及存储过程

    1.Entity Framework Code First查询视图 Entity Framework Code First目前还没有特别针对View操作的方法,但对于可更新的视图,可以采用与Table ...

  3. jQuery-easyui实现关闭全部tabs

    有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭,显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部. function openTab(text, url, icon ...

  4. Hibernate学习之hibernate.cfg.xml

    <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...

  5. ASP.NET MVC之JsonResult（六）

    前言 这一节我们利用上节所讲Unobtrusive Ajax并利用MVC中的JsonResult来返回Json数据. JsonResult 上节我们利用分部视图返回数据并进行填充,当我们发出请求需要获 ...

  6. 解决在配置Oracle数据库连接错误问题

    项目开发使用的Oracle,但是使用了不同的版本的Oracle数据库.然后自己在电脑上安装了2个连接客户端,版本分别是: 10.2.0 12.1.0 用Toad for Oracle 9.0的时候,我 ...

  7. Objective-C中把URL请求的参数转换为字典

    上一篇博客中是把URL转换为字典,那么我们如何把URL请求中的参数封装成字典,然后再封装成数组呢?对OC中字符串操作熟练的小伙伴们应该觉得这是一个a+b的问题,没错把URL中的参数转换为字典主要是对字 ...

  8. 结婚虽易，终老不易：EntityFramework和AutoMapper的婚后生活

    写在前面 我到底是什么? 越界的可怕 做好自己 后记 上一篇<恋爱虽易,相处不易:当EntityFramework爱上AutoMapper>文章的最后提到,虽然AutoMapper为了En ...

  9. Oracle同义词+dblink的实际应用

    Oracle同义词+dblink的实际应用 业务需求:原数据库(10.2.0.4.0),新数据库(11.2.0.3) 由于程序的需求原因,现在需要把新库上的某个用户直接映射到老库用户下: 1. 备份原 ...

  10. css常用的特效代码

    一.网页变灰的代码:a) 网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: ...