让ie6也支持max-width，和max-height实现图片等比例缩放

<!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="Content-Type" content="text/html; charset=gb2312" />

<title>让ie6也支持max-width，和max-height实现图片等比例缩放</title>

<style> *{ margin:0; padding:0;} ul{ list-style:none;} img{ border:0;} .box{ width:450px; height:auto; margin:100px; padding:10px;} .box li{ float:left; width:100px; height:100px; padding:1px; margin:5px; border:1px solid #ccc; text-align:center;} .box li img{ max-width:100px; max-height:100px;_width: expression(this.width > 100 && this.width > this.height ? 100 :true); _height: expression(this.height > 100 ? 100 : true);}

</style>

</head>



<body>

<div class="box">

<ul>

<li><a href="#"><img src="img/01.jpg" width="50" height="50" /></a></li>

<li><a href="#"><img src="img/Windows Logo.jpg" /></a></li>

<li><a href="#"><img src="img/04.jpg" /></a></li>

<li><a href="#"><img src="img/06.jpg" /></a></li>

<li><a href="#"><img src="img/09.jpg" /></a></li>

</ul>

</div>

</body>

</html>

 

你可能感兴趣的:(height)

  • VUE 座位图功能+扩展 NUZGNAW vue.jsjavascript前端
    1、通过循环画出页面座位图0"style="display:table;margin:0auto;min-height:472px;position:relative;">{{i.sign}}2、画出右下角的预览图3、编写对应js方法watch:{seatList:{handler(newVal,oldVal){if(this.seatList&&!stringBlank(this.seatLis
  • 解决：FFmpeg推流时报错：Broken Pipe -米兰的小铁匠 ffmpegpython
    最初利用如下代码进行FFmpeg推流：importsubprocessimportcv2importnumpyasnpimporttimeclassRTMPStreamer:def__init__(self,rtmp_url,width,height,fps=30):self.rtmp_url=rtmp_urlself.width=widthself.height=heightself.fps=f
  • 布局管理器android,Android课程---布局管理器之相对布局（一）
    下面示例的是在父容器里如何设置按钮的位置，难度：***，重点是找到一个主按钮，设置它的id，然后根据它来设置其他按钮在父容器的位置。代码示例：android:layout_width="match_parent"android:layout_height="match_parent">android:layout_width="wrap_content"android:layout_height=
  • C#结构体与异常处理实战
    结构体（Struct）的使用结构体用于将一组相关的变量整合成一个新的数据类型，便于管理和使用。例如，学生信息可以包含姓名、年龄、身高和学号等字段。结构体的定义使用struct关键字定义结构体，并在内部声明字段和方法。privatestructStudent{publicstringname;publicintage;publicdoubleheight;publicintid;publicvoid
  • 2018-11-29作业 翻页 沦陷_99999
    翻页.box1{width:960px;height:42px;border:1pxsolid#8f8f8f;margin:200pxauto;}.box2{width:100%;height:42px;margin:0auto;}.box3,.box13{width:42px;background-color:gold;padding:5px10px;margin-top:5px;}.box3a
  • qpython pillow_Python Pillow 模块
    安装Pillow模块pipinstallpillowImage模块PIL最重要的类是Imageclass,你可以通过多种方法创建这个类的实例；你可以从文件加载图像，或者处理其他图像,或者从scratch创建。Image类属性mode:图片模式size:图片大小width:图片长度height:图片宽度创建1个张图片Image.new(mode,size,color)mode:颜色模式size:（长
  • 前端，元素的层级和背景 沦陷_99999
    z-index.box1{width:200px;height:200px;background-color:#0bcd96;position:relative;z-index:3;}.box2{width:200px;height:200px;background-color:#1e389a;position:absolute;left:100px;top:100px;}.box3{width:
  • Python必学内容：格式化输出的三种方式
    1.格式化输出的三种方式在程序中，需要将输出信息打印成固定的格式，这时候就需要格式化输出。1.1占位符这种格式化输出方式与C语言中的类似，使用%s占位，再将后面%号后括号内的变量依次传给占位符，具体使用方法如下：name='Zhaosan'age=18height=185print('Mynameis%s,Iam%syearsold,myheightis%s'%(name,age,height))
  • 伪类选择器:root的妙用 weixin_33921089 javascriptViewUI
    css3的元素旋转功能非常强大，也非常吸引人，但是很多时候因为浏览器使用率的问题，我们必需要想办法兼容一些低版本的浏览器，特别是ie这朵奇葩。想要实现元素旋转本来很简单的一个属性就能实现，那就是transform:rotate(xxdeg)。举个例子：实现一个层旋转270deg。#demo{width:300px;height:200px;background-color:#FF80C0;marg
  • CSS动画实例 隆海博客 web前端#CSScsscss3
    CSS动画实例一、进度条二、涨水三、纯CSS实现轮番播图一、进度条html代码css代码.d1{width:400px;height:20px;background-color:gray;}.bar{width:10%;height:20px;background-color:blue;animation-name:jindu;animation-duration:3s;}@keyframesji
  • css设置背景图片透明度
    .demo{position:relative;width:500px;height:300px;line-height:50px;text-align:center;color:red;}.demo::before{content:"";position:absolute;left:0;top:0;z-index:-1;/*放在内容背后*/width:500px;height:300px;bac
  • html+css实战64-综合案例3-图片完成 前端大歌谣 htmlcss前端
    Documentbody{background-color:#f5f5f5;}.goods{width:234px;height:300px;background-color:#fff;/*样式居中*/margin:0auto;text-align:center;}img{width:160px;}运行结果
  • 如何将 Python代码打包成 exe程序 索拉里斯最强共鸣者 基础pythonpygame开发语言
    这篇文章主要介绍了如何把python代码打包成可执行软件，具有一定借鉴价值，需要的朋友可以参考下。1.首先python代码需要能运行。importpygameimportrandomimportsys#初始化Pygamepygame.init()#游戏常量WIDTH,HEIGHT=800,600GRID_SIZE=20GRID_WIDTH=WIDTH//GRID_SIZEGRID_HEIGHT=H
  • 【高中数学之函数】四种幂函数图线（二次、三次、开方、开立方） 土门子拉马努金 高中数学之函数高中数学函数
    【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas，请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in
  • 微信小程序 环形进度条_微信小程序：实时圆形进度条实现 武奘 微信小程序环形进度条
    第九程序给大家带来微信小程序：实时圆形进度条实现，希望大家在开发小程序过程中能够帮助大家解决。废话不多说，先上一张效果图！实现思路建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。WXML代码开始动态绘制WXSS代码特别注意：底层的canvas最好使用z-index:-99；放置于底层page{width:100%;height:100%;background-colo
  • 微信小程序之自定义模态弹窗（带动画）实例-——-微信小程序实战系列（8）
    .btn{width:80%;padding:20rpx0;border-radius:10rpx;text-align:center;margin:40rpx10%;background:#000;color:#fff;}/mask/.drawer_screen{width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;bac
  • 抖音爆火的QQ价格评估源码
    内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍抖音爆火的QQ价格评估前端源码最近抖音很火直播给别人测qq价值多少，这个源码只有前端，包含激活码验证页，评估页，自行研究吧二、效果展示1.部分代码代码如下（示例）：functioncreateLoginWindow(){mainWindow=newBrowserWindow({width:800,height:6
  • 设置img 图片居中显示 geeooooz
    style="width:200px;height:100px;float:center;margin-right:auto;margin-left:auto;"
  • CSS样式：长度单位vh 艾瑞克曾
    今天学习Web应用开发的时候，看到了vh这个单位，今天就来捋一捋vh的定义方法和使用细则vh定义vh，是指CSS中相对长度单位，表示相对视口高度（ViewportHeight），1vh=1%*视口高度。视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值。结合overfl
  • 操作内联样式-css 虎三呀
    #box1{width:100px;height:100px;background-color:red;}window.onload=function(){/**点击按钮以后，修改box1的大小*///获取box1varbox1=document.getElementById("box1");//为按钮绑定单击响应函数varbtn01=document.getElementById("btn01"
  • LeetCode热题100-11题 m0_74053517 leetcodeleetcode算法职场和发展
    11.盛最多水的容器题目描述：给定一个长度为n的整数数组height。有n条垂线，第i条线的两个端点是(i,0)和(i,height[i])。找出其中的两条线，使得它们与x轴共同构成的容器可以容纳最多的水。返回容器可以储存的最大水量。说明：不能倾斜容器。题解：classSolution{public:intmaxArea(vector&height){intn=height.size();if(n
  • 网络安全作业三
    用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px;}.login-container{background-color:white;
  • li中的图片垂直居中 黑哒哒的盟友 WEBimg居中垂直居中li中的图片垂直居中
    /*如何将IMG图片居中了，我们需要更改一下上面片段代码的格式*//*改好格式后我们写下面的CSS样式代码*/ulli{float:left;/*向左浮动*/width:600px;/*设置li的宽度*/height:340px;/*设置li的高度*/vertical-align:middle;/*将li放置在父元素的中部*/text-align:center;/*文本居中对齐（这是必须的）*/d
  • 网络安全基础作业三 Csxyzj web安全javascript安全
    回顾web前端的代码用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}.login-container{background-color:white;padding
  • element-ui 轮播图的使用 b49779e26200
    element-ui轮播图的使用```exportdefault{name:"Banner",data(){return{//图片地址数组img_list:["./banner1","./banner1","./banner1","./banner1"],//图片父容器高度bannerHeight:1000,//浏览器宽度screenWidth:0};},methods:{setSize:func
  • HTML5+CSS3小实例：流星划过天际的动画效果 艾恩小灰灰
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
  • 网络安全第三次作业 zesfeds csshtml前端
    多功能演示页面/*全局样式*/*{margin:0;padding:0;box-sizing:border-box;font-family:'Arial',sans-serif;}body{background-color:#f0f2f5;color:#333;line-height:1.6;}.container{max-width:1200px;margin:0auto;padding:20p
  • 【日志】力扣11.盛水最多的容器 SL.Pacifica 日志笔记
    2024.11.15【力扣刷题】11.盛水最多的容器-力扣（LeetCode）intmaxArea(int*height,intheightSize){intmax=0;intV=0;intleft=0;intright=heightSize-1;while(leftheight[right]){V=height[right]*(right-left);if(V>max){max=V;}right
  • 网络安全第三次作业搭建前端页面并解析
    我制作的是一个简单的登录页面网源代码1.CSS中box-sizing:border-box：使元素宽度包含边框和内边距，避免布局因padding变化错位。2.min-height:100vh：让body高度至少等于屏幕高度，确保登录框始终居中，不受内容高度影响。3..login-container的max-width:400px：限制登录框最大宽度，在大屏设备上不无限拉伸，保持美观。4.input
  • css实现箭头进度条 惜音renee
    实现的目标：源码：首先写出一个基本的样式：买家下单买家付款发货买家确认收货.progress-barli{padding:0px20px;line-height:40px;background:#50abe4;display:inline-block;color:#fff;position:relative;width:180px;text-align:center;}接下来使用:after伪类画
  • 戴尔笔记本win8系统改装win7系统 sophia天雪 win7戴尔改装系统win8
    戴尔win8 系统改装win7 系统详述 第一步：使用U盘制作虚拟光驱：         1）下载安装UltraISO：注册码可以在网上搜索。         2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文
  • BeanUtils.copyProperties使用笔记 bylijinnan java
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 两者最大的区别是： BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
  • MyEclipse中文乱码问题 0624chenhong MyEclipse
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 Window-->Preferences-->General -
  • 发送邮件 不懂事的小屁孩 send email
    import org.apache.commons.mail.EmailAttachment; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.HtmlEmail; import org.apache.commons.mail.MultiPartEmail;
  • 动画合集 换个号韩国红果果 htmlcss
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 1 transition  制作鼠标滑过图片时的放大效果 css .wrap{ width: 340px;height: 340px; position: absolute; top: 30%; left: 20%; overflow: hidden; bor
  • 网络最常见的攻击方式竟然是SQL注入 蓝儿唯美 sql注入
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
  • java笔记2 a-john java
    类的封装： 1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 4，封装的特性：       4.1设置
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx” aijuans 学习Android遇到的错误
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 我就看了一下，和她要了psd的文件，还好我有一点
  • 自己写的一个繁体到简体的转换程序 asialee java转换繁体filter简体
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。          实现的思路是重载request的调取参数的几个方法，然后做下转换。          
  • android意图和意图监听器技术 百合不是茶 android显示意图隐式意图意图监听器
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递   显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。   隐式意图;不指明调用的名称,根据设
  • spring3中新增的@value注解 bijian1013 javaspring@Value
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 1.首先在applicationContext.xml中加入：  <beans xmlns="http://www.springframework.
  • Jboss启用CXF日志 sunjing logjbossCXF
    1. 在standalone.xml配置文件中添加system-properties：     <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码 bit1129 centos
      编译必需的软件 Firebugs3.0.0 Maven3.2.3 Ant JDK1.7.0_67 protobuf-2.5.0 Hadoop 2.5.2源码包       Firebugs3.0.0   http://sourceforge.jp/projects/sfnet_findbug
  • struts2验证框架的使用和扩展 白糖_ 框架xmlbeanstruts正则表达式
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 本文介绍一下struts2通过xml文件进行校验的方法并说
  • 记录-感悟 braveCS 感悟
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。   2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了； 2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 4. 一天内集中一个定长时间段看最新资讯和偏流式博
  • 编程之美-数组中最长递增子序列 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class LongestAccendingSubSequence { /** * 编程之美 数组中最长递增子序列 * 书上的解法容易理解 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组， * 然后求排序后的数组与原数
  • 读书笔记5 chengxuyuancsdn 重复提交struts2的token验证
    1、重复提交 2、struts2的token验证 3、用response返回xml时的注意 1、重复提交 (1)应用场景 (1-1)点击提交按钮两次。 (1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 (1-3)刷新页面 (1-4)使用浏览器历史记录重复提交表单。 (1-5)浏览器重复的 HTTP 请求。 (2)解决方法 (2-1)禁掉提交按钮 (2-2)
  • [时空与探索]全球联合进行第二次费城实验的可能性 comsci
         二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验   至今给我们大家留下很多迷团.....      关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了      在这里,我的意思是,现在
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符 daizj oracleORA-12154
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 Copyright (c) 198
  • 简单排序:归并排序 dieslrae 归并排序
    public void mergeSort(int[] array){ int temp = array.length/2; if(temp == 0){ return; } int[] a = new int[temp]; int
  • C语言中字符串的\0和空格 dcj3sjt126com c
       \0 为字符串结束符，比如说：                       abcd (空格)cdefg； 存入数组时，空格作为一个字符占有一个字节的空间，我们
  • 解决Composer国内速度慢的办法 dcj3sjt126com Composer
    用法： 有两种方式启用本镜像服务： 1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下 1 2 3 4 5
  • 高效可伸缩的结果缓存 shuizhaosi888 高效可伸缩的结果缓存
    /** * 要执行的算法，返回结果v */ public interface Computable<A, V> { public V comput(final A arg); }   /** * 用于缓存数据 */ public class Memoizer<A, V> implements Computable<A,
  • 三点定位的算法 haoningabc c算法
    三点定位， 已知a,b,c三个顶点的x,y坐标 和三个点都z坐标的距离，la，lb,lc 求z点的坐标 原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 但是，由于三个点的距离可能不准，不一定会有结果， 所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 运行 gcc -lm test.c test.c代码如下 #include "stdi
  • epoll使用详解 jimmee clinux服务端编程epoll
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
  • Hibernate对Enum的映射的基本使用方法 linzx0212 enumHibernate
      枚举   /** * 性别枚举 */ public enum Gender { MALE(0), FEMALE(1), OTHER(2); private Gender(int i) { this.i = i; } private int i; public int getI
  • 第10章 高级事件（下） onestopweb 事件
    index.html <!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/
  • 孙子兵法 roadrunners 孙子兵法
    始计第一 孙子曰： 兵者，国之大事，死生之地，存亡之道，不可不察也。 故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 之以计，而索其情，曰
  • MySQL双向复制 tomcat_oracle mysql
    本文包括: 主机配置 从机配置 建立主-从复制 建立双向复制   背景 按照以下简单的步骤: 参考一下： 在机器A配置主机(192.168.1.30) 在机器B配置从机(192.168.1.29) 我们可以使用下面的步骤来实现这一点   步骤1：机器A设置主机 在主机中打开配置文件 ,
  • zoj 3822 Domination(dp) 阿尔萨斯 Mina
    题目链接：zoj 3822 Domination 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他