css图片自适应大小

代码如下:

function ReImgSize(){  
           for (j=0;j<document.images.length;j++)  
          {  
               document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;  
          } 
}

然后在body区域加上onload="ReImgSize()" 就可以了。经过测试,在Mozilla和IE上通过.。在这里补充一下关于图片的自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片的自适应。我们都知道Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。


代码如下:

img{  
        max-width:100%;height:auto;  
}

这样图片就回在div或table内自动适应其大小了.

赞 (0)

相关推荐

  • css图片自适应大小

    复制代码 代码如下: function ReImgSize(){              for (j=0;j<document.images.length;j++)             {                  document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;             }  } 然后在body区域加上onload=

  • 纯js实现div内图片自适应大小(已测试，兼容火狐)

    这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

  • jquery中加载图片自适应大小主要实现代码

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 实现过程的主要代码: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(this.height > 20

  • JQuery加载图片自适应固定大小的DIV

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 jquery图片自适应大小实现过程的主要代码: 代码如下: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(

  • CSS百分比padding制作图片自适应布局

    CSS百分比padding制作图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di

  • HTML中使背景图片自适应浏览器大小实例详解

    HTML中使背景图片自适应浏览器大小实例详解 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> : 3.body的background属性去掉,要不然会被遮住. <html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0p

  • pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法

    代码: import sys from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QLabel, QApplication) from PyQt5.QtGui import QPixmap class Example (QWidget): def __init__(self): super ().__init__ () self.initUI () def initUI(self): hbox = QHBoxLayout (self) lbl =

  • element-plus/element-ui走马灯配置图片及图片自适应的最简便方法

    目录 目标一:插入图片 目标2:图片自适应 总结 首先展示官网给的模板 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in 6" :key="item"> <h3 text="2xl" justi

  • jQuery动态改变图片显示大小(修改版)的实现思路及代码

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等. 原始代码: 复制代码 代码如下: $(document).ready(function() {     $('.post img').each(function() {     var maxWidth = 100; /

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

随机推荐