利用css实现图片等比例缩放

html-css04

利用css实现图片等比例缩放,第1张

随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站

这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?

那就利用css的强大功能吧。

先附上代码:

img

{

max-width:500px

myimg:expression(onload=function(){

this.style.width=(this.offsetWidth

>

500)?”500px”:”auto”}

)

}

解析下其中的几个数字吧。

这里规定了最大尺寸是宽500px,超过500px

则自动等比例缩小到500px

上面这段代码可能在某些浏览器下效果不好,比如存在高度不自动缩放等问题

那么可以试试下面的代码

我们再附上一段代码,对全局都是有效,如果是针对正文内容,在img前加个限制

比如我下面写的,否则可能导致logo等图片变形

.context

img{

max-width:500px

//IE7、FF等其他非IE浏览器下最大宽度为500px

width:500px

//所有浏览器中图片的大小为500px

width:expression(document.body.clientWidth>300?”300px”:”auto”)

//当图片大小大于500px,自动缩小为500px

overflow:hidden

}

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:body {background: url(image.jpg) no-repeatbackground-size: 300px}。

3、浏览器运行index.html页面,此时背景图片成功用css等比例缩小到了300px宽度的大小。

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例: