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. iOS.BackgroundTask

    Background Task 的运行时间在iOS 6及以前有大约10分钟左右,在iOS 7中有180秒. Reference: 1. Multitasking in iOS 7 http://www ...

  2. Ubuntu12.04软件安装指南

    更新升级源 首先编辑软件源,在终端输入下面命令: sudo gedit /etc/apt/sources.list 较快速的升级源有163,台湾源,科大源,搜狐源等,大家将新的升级源全部覆盖原文件so ...

  3. python提取百度经验<标题,发布时间,平均流量,总流量,具体的链接>

    之前想研究下怎么抓网页数据.然后就有了下面的练习了. 如有BUG.也纯属正常. 只是练习.请勿投入产品使用. #!/usr/bin/python # -*- coding: utf-8 -*- #Fi ...

  4. GCC编译的几个步骤

    参考资料: https://blog.csdn.net/czg13548930186/article/details/78331692 一个C/C++文件要经过预处理(preprocessing).编 ...

  5. 会话和http请求

    一次HTTP请求和响应的过程 域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> ...

  6. xcode如何运行下载的demo工程

    1. 首先你需要改Bundle Identifier,修改成别人没注册过的. 2. 选中 “Automatically manage signing” 3. 在Team里面添加自己的个人帐号了.

  7. js中将斜杠\替换的方法

    js中将/替换的方法replace(/\//g, '-') 中间涉及到js的一些转义问题,试了几个方法,发现这个可以,就记下来.

  8. 通过 Spring Security配置 解决X-Frame-Options deny 造成的页面空白 iframe调用问题

    spring Security下,X-Frame-Options默认为DENY,非Spring Security环境下,X-Frame-Options的默认大多也是DENY,这种情况下,浏览器拒绝当前 ...

  9. Hadoop3集群搭建之——hive安装

    Hadoop3集群搭建之——虚拟机安装 Hadoop3集群搭建之——安装hadoop,配置环境 Hadoop3集群搭建之——配置ntp服务 Hadoop3集群搭建之——hbase安装及简单操作 现在到 ...

  10. 2019.01.22 51nod 1203 JZPLCM（线段树+链表）

    传送门 一道很有意思的题. 题意简述:给一个数列,多次询问区间的lcmlcmlcm,答案对1e9+71e9+71e9+7取模. 思路:首先考虑到一个区间的lcmlcmlcm就是其中所有出现过的素数的最 ...