CSS 基础 例子 Image 高度设置
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 基础 例子 最小高度和最大高度设置
最小高度,无论什么时候,高度不会小于该值,即使内容很少,不限制高度最大值,超出时候,按照实际内容来决定高度 最大高度,无论什么时候,高度不会大于该值,即使内容很多,不限制最小高度,超出时候,多出部分会 ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- CSS 基础 例子 display属性:block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
- CSS 基础 例子 浮动float
一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...
- CSS 基础 例子 行高line-height
“行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定 ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- CSS 基础 例子 盒子模型及外边距塌陷
我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...
- CSS 基础 例子 图片拼合技术
利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...
- CSS 基础 例子 背景色 & 背景图片
背景简写形式 : body {background:#ffffff url('img_tree.png') no-repeat right top;} 一.背景色 background-color ...
随机推荐
- Hyperscan与Snort的集成方案
概况 Hyperscan作为一款高性能的正则表达式匹配库,非常适用于部署在诸如DPI/IPS/IDS/NGFW等网络解决方案中.Snort (https://www.snort.org) 是目前应用最 ...
- 关于call_rcu在内核模块退出时可能引起kernel panic的问题
http://paulmck.livejournal.com/7314.html RCU的作者,paul在他的blog中有提到这个问题,也明确提到需要在module exit的地方使用rcu_barr ...
- guide dpdk
Welcome to DPDK Guide! Contents: Setting up DPDK Important Prerequisites Setting up repositories Red ...
- ui设计学习路线图分享送给初学者
本文来源:千锋UI设计 Ui设计师就业市场前景及薪资很可观,而且现在市场上对于ui设计师的人才需求也很大,所以,现在越来越多的人看好这一行业,纷纷投入到ui设计的学习中来,那么想新手想要学好ui设计, ...
- HashMap 、HashTable、TreeMap、WeakHashMap的区别是什么
Java为数据结构中的映射定义了一个接口java.util.Map,它有4个实现类:HashTable.HashMap.TreeMap.WeakHashMap. HashMap和HashTable的区 ...
- IntelliJ IDEA 配置svn
1.启用版本控制 2.在弹出的框中选择svn 3.下载并解压VisualSVN 下载地址:http://subversion.apache.org/packages.html#windows 4.i ...
- 团队-Python 爬取豆瓣电影top250-成员简介及分工
姓名:周鑫 班级:软件6班 团队名称:咣咣踹电脑 擅长:Python,java 分工:编写数据库
- Desktop Central帮助您升级Windows 10,获取更新的五大增强功能
- java web实践
语言:java.javascript 软件:eclipse.mysql 环境配置:下载jdk:配置jdk环境变量.相关教程:https://jingyan.baidu.com/article/db55 ...
- php mongodb driver
yum install -y PHP-devel php-pear httpd-devel pecl install mongo 执行以上命令后,你需要修改php.ini文件,在php.ini文件中添 ...