css中图片缩小代码,css让图片等比例缩小的代码

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

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

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

先附上代码：

img {

max-width:500px;

myimg:expression(οnlοad=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;

}

关键词：

css中图片缩小代码,css让图片等比例缩小的代码相关推荐

Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
如何在内嵌 css 中编写: hover_优秀 CSS 代码的 8 个编写技巧！
这篇文章的目的不在于规则手册,而在于你正在编写CSS时的指南.希望能帮助大家找到自己的流程,而这篇文章的目标是让你的CSS一致,简单,易于使用. 编写基本的CSS和HTML是我们作为Web开发人员学习 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
怎么在css中加横线分层,CSS分层
为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理大量的样式,覆盖.权重和很多!importa ...
css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
css中文本指什么,CSS中的文本属性学习指南
文本缩进 text-indent 值:长度值(正.负均可) 示例:p {text-indent:3em;} 字符间距 letter-spacing 值:任何长度值(正.负值均可). 示例:p {let ...

css中图片缩小代码,css让图片等比例缩小的代码

css中图片缩小代码,css让图片等比例缩小的代码相关推荐

最新文章

热门文章