css 背景图片自动缩放实例

默认情况下,背景属性是平铺的,如果背景图片较大,而box小,那么就只能显示左上角那块背景.如果要让背景全部显示出来,

 代码如下 复制代码

.color_checked {
 float: right;
 width: 16px;
 height: 16px;
 background: url(../images/color_check.png) center 0 no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

如果你还希望图片自动缩放

 代码如下 复制代码

#blogcon img { max-width: 400px; max-height: 400px; width: expression(this.width>400 && this.width>this.height ? 400 : true); height: expression(this.height > 400 ? 400 : true); }

这段话的意思解释一下：将id为blogcon标签下面的所有图像img标签的最大宽度设置为400px，最大高度设置为400px，宽度的判断如果图片宽度和高度都大于400的时候将高度按比例缩放。

原文来自:应用开发笔记

时间： 2024-10-14 20:42:48

css 背景图片自动缩放实例的相关文章

css expression 图片自动缩放

我们判断图片超过设置大小时就会自动缩放到指定大小的expression起到关键作用. <style>    .image {        max-width:600px;height:auto;cursor:pointer;        border:1px dashed #4e6973;padding: 3px;        zoom:expression( function(elm) {            if (elm.width>560) {              

css 图片自动缩放

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

js根据鼠标移动速度背景图片自动旋转的方法_javascript技巧

本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

ASP技巧之让图片自动缩放以适合界面大小

技巧 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下语句 If Instr(strType,"[image]")>0  And ZC_UBB_IMAGE_ENABLE Then  '[img]    objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])"    strContent=

如何让图片自动缩放以适合界面大小

如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下语句   If Instr(strType,"[image]")>0  And ZC_UBB_IMAGE_ENABLE Then  '[img]     objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])"    strContent=

CSS背景图片background-image须注意路径问题

css|背景图片|问题 在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用.应用CSS网页布局,实现内容与表现.行为相分离,作为页面框架.装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义. 我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中.我们会发现有时候我们的图片无法显示了.此时,请查看你的CSS代码,是不是重复设置有问题,是不是图片的定位有问题.如果这些都没有问题请去掉

ASP程序实现图片自动缩放以适合界面大小

程序 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数 If Instr(strType,"[image]")>0  And ZC_UBB_IMAGE_ENABLE Then  '[img]     objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])"    strContent= objRegExp.

Android 背景图片的缩放实现

Android 背景图片的缩放 ONE Goal ,ONE Passion ! 我们看到一些效果,控件中的背景图片会慢慢变大,但是控件不会随着图片的放大而变大.效果如下: 分析: 想让图片变大,而且控件本身大小不能改变,那么就要改变图片自身大小,而不能改变控件大小. 实现原理: 1,首先拿到我们要放大的图片bitmap. 2,使用Bitmap.createBitmap().创建一个bitmap的副本. 3,使用matrix去改变图片副本本身大小 4,使用ValueAnimator去根据变化率将副

兼容ie、firefox的图片自动缩放的css跟js代码分享_javascript技巧

这个功能主要是解决内容页中的图片过大撑出,导致页面比较难看,就需要这样的代码,需要的朋友可以参考下 需求:图片width<=600px,height<=800. 1.利用max-width,max-height使图片等比例自动缩放代码: 复制代码 代码如下: img{max-width: 600px;max-height: 800px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本