body高度100%，三个image高度分别为auto,50%,60%,imge高度为当时body高度的百分比，auto时为原始高度

　　html代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

html {height:100%;}

body {height:100%;}

<!-- auto 图片原始多少就多少-->

img.normal {height:auto;}

<!-- 相对于body高度的50%-->

img.big {height:50%;}

<!-- 相对于body高度的10%-->

img.small {height:10%;}

</style>

</head>

<body>

<!-- width="95" height="84"无效-->

<img class="normal" src="logocss.gif" width="95" height="84" /><br>

<img class="big" src="logocss.gif" width="95" height="84" /><br>

<img class="small" src="logocss.gif" width="95" height="84" />

</body>

</html>

　　运行结果

CSS 基础 例子 Image 高度设置的更多相关文章

  1. CSS 基础 例子 最小高度和最大高度设置

    最小高度,无论什么时候,高度不会小于该值,即使内容很少,不限制高度最大值,超出时候,按照实际内容来决定高度 最大高度,无论什么时候,高度不会大于该值,即使内容很多,不限制最小高度,超出时候,多出部分会 ...

  2. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  3. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  4. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

  5. CSS 基础 例子 行高line-height

    “行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定 ...

  6. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  7. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  8. CSS 基础 例子 图片拼合技术

    利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...

  9. CSS 基础 例子 背景色 & 背景图片

    背景简写形式 : body {background:#ffffff url('img_tree.png') no-repeat right top;} 一.背景色  background-color ...

随机推荐

  1. JVM 体系结构概述 （一）

    一.jvm运行在操作系统之上的,它与硬件没有直接交互: 二.JVM体系结构概览 JVM的基本结构:类加载器.执行引擎.运行时数据区.本地方法接口: 过程:class文件 ----> 类加载器 - ...

  2. Real-time qPCR So Easy?

    Real-time qPCR So Easy? [2016-05-27]       实时荧光定量PCR技术是在定性RCR技术基础上发展起来的核酸定量技术,于1996年由美国Applied biosy ...

  3. start()方法和run()方法有什么区别？

    通过调用线程类的start()方法来启动一个线程,使线程处于就绪状态,即可以被JVM来调度执行,在调度过程中,JVM通过调用线程类的run()方法来完成实际的业务逻辑,当run()方法结束后,此线程就 ...

  4. Hive 系列（一）安装部署

    Hive 系列(一)安装部署 Hive 官网:http://hive.apache.org.参考手册 一.环境准备 JDK 1.8 :从 Oracle 官网下载,设置环境变量(JAVA_HOME.PA ...

  5. java连接数据库以及连接参数格式

    //链接数据库代码部分  下面具有连接的基本参数可以对照修改(参数存放在file下面的database.properties下面) //参数存放在file下面的database.properties下 ...

  6. centos配置备忘(apache\php\mysql)

    1. 安装apache\php\mysql=======================================yum -y install httpd php mysql mysql-ser ...

  7. Emacs, Nano, or Vim 编辑器“三剑客”

    # Vim 强大,多种模式相互切换,不同于传统“录入式“写东西 对后续两个编辑器不熟悉 # nano 退出ctrl + x http://man.linuxde.net/nano # emacs ht ...

  8. springMVC学习 四 请求的中文乱码解决

    在使用SpringMVC时,同样有前端向后端发送请求,请求参数中有中文,需要解决中文乱码问题,在Spring中也是向java web中一样,通过一个过滤器来解决中文乱码. 这个过滤器在spring-w ...

  9. WPF禁止拖拽窗口到边缘自动最大化

    近期有个需求,可以通过拖拽改变窗口大小,但是不允许窗口最大化.最小化.拖到边缘的时候也不能自动最大化. 要想禁止拖拽窗口到边缘自动最大化,只要改注册表即可,但是系统所有应用都会被禁止. 1.运行reg ...

  10. 2018.11.02 NOIP训练 停车场（线段树）

    传送门 这是一道困饶了我一年的题. 其实就是去年去NOIP提高组试水的时候考的模拟题 但当时我水平不够,跟ykykyk一起杠了一个下午都没调出来. 今天终于AAA了. 其实就是一个维护最长连续0101 ...