Width和height—CSS图片的缩放

CSS图片的缩放：在CSS中图片的缩放是通过width和height两个属性来实现的。

Width和height属性：可以设置为相对大小，也可以设置为绝对大小。Width和height属性设置为相对大小时，当拖动缩放浏览器时窗口改变其宽度时，图片的大小也会相应地发生变化。如果仅仅只设置了图片的width属性，而没有设置height属性时，图片本身会自动给纵横比例缩放，如果只设定height属性也是一样的道理。只有当同时高设定width和height属性时才会不等比例缩放。
CSS图片的缩放示例：

<html>
<head>
<title>图片缩放</title>
<style>
<!--
img.test1{
width:50%;            /* 相对宽度 */
}
-->
</style>
</head>
<body>
<img src="http://www.baidu.com/img/baidu_logo.gif" class="test1">
</body>
</html>
 

时间： 2024-11-01 08:18:45

Width和height—CSS图片的缩放的相关文章

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+css 图片自动缩放自适应大小_javascript技巧

我加了css的限制: 复制代码 代码如下: div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;} ◎ max-width:600px; 在IE7.FF等其他非IE浏览器下最大宽度为600px.但在IE6中无效. ◎ width:600px; 在所有浏览器中图片的大小为600px

Android多点触控技术实战 针对图片自由缩放和移动_Android

在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的.因此本篇文章中,我们就来对这一功能进行完善,加入点击图片就能浏览大图的功能,并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放. 如果你还没有看过 Android瀑布流照片墙实现,体验不规则排列的美感 这篇文章,请尽量先去阅读完再来看本篇文章,因为这次的代码完全是在上次的基础上进行开发的. 那我们现在就开始动手吧,首先打开上次的P

Android多点触控技术实战 针对图片自由缩放和移动

在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的.因此本篇文章中,我们就来对这一功能进行完善,加入点击图片就能浏览大图的功能,并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放. 如果你还没有看过 Android瀑布流照片墙实现,体验不规则排列的美感 这篇文章,请尽量先去阅读完再来看本篇文章,因为这次的代码完全是在上次的基础上进行开发的. 那我们现在就开始动手吧,首先打开上次的P

兼容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脚本

CSS图片等比例缩放代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

兼容ie、firefox的图片自动缩放的css跟js代码分享_图象特效

需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset

css图片等比例缩放实例

 代码如下 复制代码 <style type="text/css"> .thumbImage img{ MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important; } .thumbImage {MARGIN: auto;WIDTH: 600px;} *html.thumbIm

css图片按比例缩放实现程序

在FF , OPERA , SAFARI , IE7 , IE8 方法如下:  代码如下 复制代码   img{max-width:100px;max-height:100px;} img{min-width:100px;min-height:100px;} IE6及其以下版本的浏览器,利用其支持的expression属性:    代码如下 复制代码 * html img { /* for IE6 */ width: expression(this.width > 100 && th