在线效果体验：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. Angularjs1培训

    Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...

  2. Python 日志模块 logging通过配置文件方式使用

    vim logger_config.ini[loggers]keys=root,infoLogger,errorlogger [logger_root]level=DEBUGhandlers=info ...

  3. SQL Server 日期函数：EOMonth、DateFormat、Format、DatePart、DateName

    一,月份的最后一天 函数 EOMonth 返回指定日期的最后一天 EOMONTH ( start_date [, month_to_add ] ) 1,对于start_date 有两种输入方式,能够转 ...

  4. 【WP8.1开发】用手机来控制电脑的多媒体播放

    为了用电脑看电影时方便控制,我就突发其想,做一个手机app来通过无线网络远程调节电脑上的音量.后来进行尝试成功后,我就想,光是调音量似乎单调了些,就把播放/暂停,上一首,下一首,等多媒体控制功能也加上 ...

  5. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  6. JavaScript 命名空间

    <script type="text/javascript"> Namespace=new Object(); Namespace.register=function( ...

  7. Android之SqlLite数据库使用

    每个应用程序都要使用数据,Android应用程序也不例外,Android使用开源的.与操作系统无关的SQL数据库—SQLite.SQLite第一个Alpha版本诞生于2000年5月,它是一款轻量级数据 ...

  8. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  9. Rehosting the Workflow Designer

    官方文档:https://msdn.microsoft.com/en-us/library/dd489451(v=vs.110).aspx The Windows Workflow Designer ...

  10. iOS开发之使用XMPPFramework实现即时通信(一)

    关于XMPP的理论介绍在本篇博客中就不做赘述了,如何在我们之前的微信中加入XMPP协议来实现通信呢?下面将会介绍一下XMPP的基本的知识,让我们的微信可以实现互联通信.要做的准备工作是要有服务器支持X ...