在线效果体验：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. 学习nodejs有感

    接触nodejs一段时间了,不断的去接触接触,nodejs是一个能让前端程序员做后台开发的一项技术.  随着学习,让我更好的理解了前后端,以及浏览器是如何运作的

  2. 应用Web.Config配置网站

    1.配置数据库连接 在ASP.NET中配置数据库连接的两种方式: appSettings和connectionStrings 命名空间: using System.Configuration; 1)a ...

  3. 《Qt Quick 4小时入门》学习笔记4

    http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...

  4. IOS 消息机制(NSNotificationCenter)

    消息机制 NSNotificationCenter 一直都在频繁使用,但是却对其原理不是十分了解.今天就花些时间,把消息机制原理重头到尾好好过一遍. iOS 提供了一种 "同步的" ...

  5. isPrototypeOf&&getPrototypeOf

    在JavaScript这个一切皆为对象的世界里,难免会判断原型链的问题.那么我们就有必要了解了解isPrototypeOf和getPrototypeOf这两个方法咯. 1.isPrototypeOf ...

  6. C# 在word中查找及替换文本

    C# 在word中查找及替换文本 在处理word文档时,很多人都会用到查找和替换功能.尤其是在处理庞大的word文档的时候,Microsoft word的查找替换功能就变得尤为重要,它不仅能让我们轻易 ...

  7. 如何做优化，UITabelView才能更加顺滑 （转载）

    这篇文章是前两周@叶孤城叶大在微信群里面的分享,一直到这两天才翻出来研究.很多实用的东西,不过由于水平有限,有些地方没能翻译好,还请大家指正. 我已经在iOS这个最好的移动平台上有几年的开发经验了.在 ...

  8. 【LeetCode】Palindrome Pairs（336）

    1. Description Given a list of unique words. Find all pairs of distinct indices (i, j) in the given ...

  9. 【Java】记录一次代码优化

    前不久的项目时间紧张,为了尽快完成原型开发,写了一段效率相当低的代码. 最近几天闲下来,主动把之前的代码优化了一下:)   标签:Java.Mybatis.MySQL 概况:本地系统从另外一个系统得到 ...

  10. SpringMVC 参数注入

    写一个web service, 总是400. 说是request有问题,server不识别.然而检查了很多次都没问题.最终问题指向spring对参数的解析和注入. 一个controller中可以自定义 ...