CSS 图像

通过CSS可以控制图像的大小和对齐方式。

图像大小

虽然在HTML中，img标签有属性height、width设置高和宽，在工作中却使用得非常少，通常使用CSS来控制大小。

给盒子设置属性height、width限制大小。单位通常是像素。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <title>图像大小</title>
        <style type="text/css">
            img.large {
                width: 500px;
                height: 500px;}
            img.medium {
                width: 250px;
                height: 250px;}
            img.small {
                width: 100px;
                height: 100px;}
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>     
        <img src="https://www.0735it.net/images/kc/jspservlet.jpg" class="large" alt="Magnolia" />
        <img src="https://www.0735it.net/images/kc/jspservlet.jpg" class="medium" alt="Magnolia" />
        <img src="https://www.0735it.net/images/kc/jspservlet.jpg" class="small" alt="Magnolia" />
    </body>
</html>

图像剧中对齐

我们在《CSS 内外边距》学过内容居中，它的原理是将外边左右设置为auto。图像居中也是这个原理。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <title>图像居中</title>
        <meta charset="UTF-8">
        <style type="text/css">
            img.align-center {
                display: block;
                margin: 0px auto;}
            img.medium {
                width: 250px;
                height: 250px;}
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>     
        <p><img src="https://www.0735it.net/images/kc/jspservlet.jpg" alt="Servlet/JSP课程" class="align-center medium" />
<b><i>Servlet</i></b> 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</p>
    </body>
</html>

图像左右对齐

左右对齐图像使用的技术是浮动div元素。

float:left 左对齐

float:right右对齐

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <title>图像左右对齐</title>
        <meta charset="UTF-8">
        <style type="text/css">
            body {
                font-family: Georgia, "Times New Roman", serif;
                color: #665544;}
            img.align-left  {
                float: left;
                margin-right: 10px;}
            img.align-right {
                float: right;
                margin-left: 10px;}
            img.medium {
                width: 250px;
                height: 250px;}
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>         
        <p><img src="https://www.0735it.net/images/kc/jspservlet.jpg" alt="Servlet/JSP课程"  class="align-left medium" /><b><i>Servlet</i>
</b> 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</p>
        <p><img src="https://www.0735it.net/images/kc/h5.jpg" alt="HTML5 课程"  class="align-right medium" />
<b><i>HTML5</i></b> 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</p>
    </body>
</html>

CSS 图像的更多相关文章

  1. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  2. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  3. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  4. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

  5. CSS 图像透明/不透明

    CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 一.示例一:创建一个透明图像 CSS3中属性的透明度是 opacity. ...

  6. css图像拼合技术（精灵图）

    CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...

  7. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  8. CSS：CSS 图像透明/不透明

    ylbtech-CSS:CSS 图像透明/不透明 1.返回顶部 1. CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 更多 ...

  9. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

随机推荐

  1. 2017-2018 ACM-ICPC NEERC B题Berland Army 拓扑排序+非常伤脑筋的要求

    题目链接:http://codeforces.com/contest/883/problem/B There are n military men in the Berland army. Some ...

  2. docker下运行labview2010

    前言 本人笔记本用kali,因课程需要,要在Linux下运行Labview,找到了2010的iso,但只支持rehat系列的发行版,用rpm转化deb的方案不可行,尝试了在virtualbox下运行w ...

  3. 读书笔记--《gongchandang宣言》

    纪念马克思诞辰200周年 末尾 gongchandang人不屑于隐瞒自己的观点和意图.他们公开宣布:他们的目的只有用暴力推翻全部现存的社会制度才能达到. 让统治接机在共产主义革命面前发抖吧. 无产者在 ...

  4. day053 url反向解析图解 模板渲染

    一.语法 两种特殊符号(语法): {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二.变量 1. 可直接用  {{ 变量名 }} (可调用字符串, 数字 ,列表,字典,对象等) ...

  5. 支付宝 生活号 获取 userId 和 生活号支付

    第一:申请生活号. 第二:激活开发者 模式 ,并且上创 自己的 公钥  ( 支付宝 demo 里面有 ) 第三: 配置 回调地址 ( 用于前端 调用获取 auth_code 的时候 填写的回调地址,支 ...

  6. Linux scp命令详解

    Linux scp命令 Linux scp命令用于Linux之间复制文件和目录. scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. 语法: ...

  7. Numpy、SciPy、MatPlotLib在Python2.7.9下的安装与配置

    前言: Python安装完Numpy,SciPy和MatplotLib后,可以成为非常犀利的科研利器.网上关于这三个库的安装都写得非常不错,但是大部分人遇到的问题并不是如何安装,而是安装好后因为配置不 ...

  8. 使用Intellij搭建Servlet开发环境

    https://blog.csdn.net/yhao2014/article/details/45740111 使用Tomcat 9时,必须使用jre 1.8,否则会出现Unable to ping ...

  9. react 在 componentWillMount() 中调用异步函数时，componentWillMount() finishes after render()

    刚开始使用 react,很多属性.方法不是很熟.在此记录下我所遇到的问题及解决方法. 我在 componentWillMount() 中调用了一个异步函数,在返回结果中调用 this.setState ...

  10. System类学习笔记

    最近在学习源码的过程中发现:很多深层次的代码都用到了一个类System类,所以决定对System类一探究竟 本文先对System类进行了剖析,然后对System类做了总结 一.首先对该类的中的所有字段 ...