在线效果体验：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. iOS-App上架流程

    前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...

  2. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  3. KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述

    Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...

  4. Distributed3：SQL Server 创建分布式数据库

    分布式数据库的优势是将IO分散在不同的Physical Disk上,每次查询都由多台Server的CPU,I/O共同负载,通过各节点并行处理数据来提高性能,劣势是消耗大量的网络带宽资源,管理难度大.在 ...

  5. Neutron 网络基本概念 - 每天5分钟玩转 OpenStack（66）

    上次我们讨论了 Neutron 提供的功能,今天我们学习 Neutron 模块几个重要的概念. Neutron 管理的网络资源包括 Network,subnet 和 port,下面依次介绍. netw ...

  6. ASP.NET WebAPi之断点续传下载（上）

    前言 之前一直感觉断点续传比较神秘,于是想去一探究竟,不知从何入手,以为就写写逻辑就行,结果搜索一番,还得了解相关http协议知识,又花了许久功夫去看http协议中有关断点续传知识,有时候发觉东西只有 ...

  7. 走进AngularJs(六) 服务

    今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...

  8. Ubuntu杂记之——JDK、ANT安装、配置

    一.安装JDK 方法一:使用软件源安装openjdk sudo apt-get install openjdk-7-jdk 方法二:使用软件源安装sun jdk sudo apt-get instal ...

  9. 连连看游戏（dfs）【华为上机题目】

    1 连连看游戏 今天同学给我做了道编程题目,貌似是华为的,题目描述大概是这样的: 给定一个连连看棋盘,棋盘上每个点都有各种图案(用非0数字表示),输入棋盘上的任意两个左标,判断这两个坐标对应的图案是否 ...

  10. 如何装出高逼格的64位win7系统

    自从有了ghost这个玩艺儿,装系统就不再是什么技术活了,但是一直崇尚纯净.原生.DIY的挨踢男来说,这种千篇一律的系统从来都不是他们想要的.为了榨干硬件的每一滴性能,发挥软件的最大效果,他们喜欢折腾 ...