CSS 基础 例子 Image 高度设置

时间：2023-01-04 13:04:07

　　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 高度设置

CSS 基础 例子 Image 高度设置

CSS 基础 例子 Image 高度设置

CSS 基础 例子 Image 高度设置

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 基础 例子 伪元素和伪类 &amp&semi; 区别

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

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

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

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

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

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

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

随机推荐

  1. 如何判断css是否加载完成

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...

  2. Android自动化测试 - Robotium之re-sign&period;jar重签名后安装失败提示Failure &lbrack;INSTALL&lowbar;PARSE&lowbar;FAILED&lowbar;NO&lowbar;CERTIFICATES&rsqb;解决方案

    问题:在用re-sign.jar重签名apk文件后,显示重签名成功,但在实际安装过程中确提示:Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES] 原因:网上查 ...

  3. 深入了解Struts2返回JSON数据的原理

    首先来看一下JSON官方对于"JSON"的解释: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析 ...

  4. &lbrack;CareerCup&rsqb; 17&period;7 English Phrase Describe Integer 英文单词表示数字

    17.7 Given any integer, print an English phrase that describes the integer (e.g., "One Thousand ...

  5. 入门级：怎么使用C&num;进行套接字编程（一）

    翻译一篇简单的文章学习下基础,此文针对我等对socket只听说未尝试阶段的水平. How to C# Socket programming C#通过他的命名空间像System.Net和System.N ...

  6. Linux 添加环境变量和删除环境变量

    环境变量是一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息.例如PATH.在交叉编译中,会经常运用到环境变量的设置. 在linux中,查看当前全部的环境变量的命令式env. 当然也 ...

  7. 关于mysqli 连接数不能正确释放的解决方案

    /** * 析构函数 */ //解决重复链接的问题 private $db_handler = null; function __destruct() { Log::logWrite($this-&g ...

  8. 触发事件trigger

    触发事件,在本例中,文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击. <script src="http://how2j.cn/study/jquery.min. ...

  9. vue（5）—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  10. 使用ethtool显示硬件PHY信息

    1.总结: 使用ethtool 可以查看端口的phy配置 2.显示端口配置 [root@localhost zhou]# ethtool ens33Settings for ens33: Suppor ...

相关文章