CSS强制图片大小

时间:2022-12-27 22:33:33

相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决。

该CSS的功能是:大于600的图片自动调整为600显示。

<style type="text/css">
<!--

img {width:expression(this.width>600?"600px":this.width+"px");}
}

-->
</style>

上面的代码在使用的过程中发现第一次打开页面时图片会缩到很小,需要刷新页面才能实达所设置的大小,故又找到了以下代码:

img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
 }

经测试是可以解决图片自适应大小的问题了。

另一种方法是让图片自适应DIV及table的大小:
先定义一个JAVA函数

<script type="text/javascript" >

function ReImgSize(){ 
for (j=0;j<document.images.length;j++) 

document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width; 

}

</script>

然后在body区域加上onload="ReImgSize()" 就可以了。

顺道说一下:

Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。

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

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

CSS强制图片大小的更多相关文章

  1. CSS自动控制图片大小的代码

    img { max-width: 800px; height: auto; } 代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有 ...

  2. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  3. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  4. css限制图片大小,避免页面撑爆

    /*==========限制图片大小======避免页面撑暴========*/img { max-width:100%;width:expression(width>669?"100 ...

  5. mui-图文列表 图片大小问题

    下面是源码,不能调节图片大小 <ul class="mui-table-view"> <li class="mui-table-view-cell mu ...

  6. 实现图片大小的自动控制( 图片大小控制CSS代码)

    图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...

  7. FE&colon; CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  8. Css Sprite 图片等比缩放图片大小

    图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?1. 首先看下如何以40*40显示第二张图片: 正常显示css代码 .sprite { background-image: ur ...

  9. div css 伪类 不固定图片大小 居中, css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

随机推荐

  1. 看看Maple T&period;A&period;的详细作用

    Maple T.A.是一个基于互联网的在线考试和智能评分系统,是Maplesoft公司 与美国数学协会(MAA)合作开发的成果,在全球拥有大量的院校用户.Maple T.A.提供了用户数据库.所见即所 ...

  2. 字符串s中从第i个位置起取长度为len的子串,函数返回子串链表

    /*已知字符串采用带结点的链式存储结构(详见linksrting.h文件),请编写函数linkstring substring(linkstring s,int i,int len),在字符串s中从第 ...

  3. iOS开发网络篇—HTTP协议

    iOS开发网络篇—HTTP协议 说明:apache tomcat服务器必须占用8080端口 一.URL 1.基本介绍 URL的全称是Uniform Resource Locator(统一资源定位符) ...

  4. emacs&plus;ensime&plus;sbt打造spark源码阅读环境

    欢迎转载,转载请注明出处,徽沪一郎. 概述 Scala越来越流行, Spark也愈来愈红火, 对spark的代码进行走读也成了一个很普遍的行为.不巧的是,当前java社区中很流行的ide如eclips ...

  5. html5in24hours

    http://www.html5in24hours.com/books/the-book/code/ 1.浏览器测试 http://browsershots.org/ 2.http://www.fon ...

  6. 编写javascript的基本技巧

    第一.编写可维护的代码 什么叫着编写可维护的代码呢?就是当我的做出来的项目,拿给其它编码团队能很快的看懂 你编写的代码,你的整个项目的逻辑等等.一个项目的修改维护是要比开发一个项目的成本 是要高的.例 ...

  7. SQL Server审计功能入门:更改跟踪&lpar;Change Tracking&rpar;

    原文:SQL Server审计功能入门:更改跟踪(Change Tracking) 介绍 更改跟踪是一种轻量型解决方案,它为应用程序提供了一种有效的更改跟踪机制.常规的,自定义变更跟踪和读取跟踪数据, ...

  8. &lbrack;HNOI2002&rsqb;营业额统计&lowbar;Treap

    [HNOI2002]营业额统计 题目大意:给你一串n数序列,对于每一个刚输入的数a,找到一个前面的数k,使得|a-k|最小. 注释:$n<=32767,ai<=10^6$. 想法:刚学Tr ...

  9. C&num;基础知识总结&lpar;七&rpar;

    摘要 C#最简单的两个算法:输入数字打印出菱形星星.冒泡排序1.输入数字打印出菱形星星 static void Main(string[] args) { //输入一个数,表示菱形星号,数字必须是一个 ...

  10. css自适应浏览器大小

    css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...