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. ubuntu16.04+caffe+GPU+cuda+cudnn安装教程

    步骤简述: 1.安装GPU驱动(系统适配,不采取手动安装的方式) 2.安装依赖(cuda依赖库,caffe依赖) 3.安装cuda 4.安装cudnn(只是复制文件加链接,不需要编译安装的过程) 5. ...

  2. ViewpageMaiActity

    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu ...

  3. spring jpa + mybatis快速开始：

    springmvc开始搭建 源码地址 https://gitee.com/flydb/spingjpamy pom: <packaging>war</packaging> &l ...

  4. springMVC---业务处理流程图和最简单的springMvc搭建截图说明

    一.springMVC业务处理流程图: 二.如何搭建springMvc框架 1.建立web工程 2.引入jar包 3.创建web.xml文件 4.创建springMvc-servlet.xml文件 5 ...

  5. python基础-闭包

    def bibao(): li = [] n = [1] def inner(): li.append(n[0]) n[0] +=1 print(li) return inner b = bibao( ...

  6. BNF

    Backus-Naur Form, 巴科斯-诺尔 范式:一种描述高级语言语法的表示法. BNF 符号概览 符号 描述 ::= 该符号左边的元素被该符号右边的结构所定义 *: 该符号前面的结构可以重复零 ...

  7. 第二章 C#语法基础 (2.2 C#语言的运算符和表达式)

    [案例]本案例通过随机数发生器随机产生三条边,要求输出三天边长(边长长度为1~20的整数),并判断是否可以构成一个三角形. 如果可以,则计算出三角形面积,否则输出信息”三条随机的边不能构成三角形“. ...

  8. [转]Python3《机器学习实战》学习笔记（一）：k-近邻算法(史诗级干货长文)

    转自http://blog.csdn.net/c406495762/article/details/75172850 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一 简 ...

  9. 11g R2 RAC 虚拟机

    虚拟机安装RAC文档 本文档包含内容 一:安装系统 二:各节点配置系统参数 三:虚拟机创建共享存储 四:配置磁盘绑定 五:安装GRID 六:创建ASM DG 七:安装database 八:安装碰到的问 ...

  10. SpringData JPA框架使用时出现JSON循环依赖解决方案

    困扰许久的问题终于解决了,之前项目太赶,没有深入学习解决,不甘心,今天再次搭起架子试试,哈哈,终于解决! @ManyToOne(cascade={CascadeType.MERGE,CascadeTy ...