图片自适应布局

  使用百度图片搜索的时候，可以看到搜索页面，所有的图片基本都是定高度显示，图片的宽度随着高度等比例缩放。点击搜搜页面的每一张图片， 可以跳转到一个页面只有一张图片，显示的尺寸是图片的原大小尺寸。

创建内容

  首先要做的是创建一个index.html文件来呈现搜索界面，然后创建两个文件夹，名为picture文件夹用来存放所有图片集中管理，名为html文件夹用来存放每一张图片独占的 html文档。实现在index.html页面点击一张图片，然后跳转到一个新的html页面显示图片原尺寸。

  picture文件夹中的图片各种大小都有，都是随机的。html文件夹中的内容非常简单，就是用一个img引入一张图片，主要工作是编辑index.html文件。

html文件夹中第一个html文件

<img src="../picture/1.png"><!--注意相对路径的使用-->

index.html文件代码

<div>
    <!--标签a包裹img元素-->
    <a href="html/1.html" target="_blank"><img src="picture/1.png"></a>
    <a href="html/2.html" target="_blank"><img src="picture/2.png"></a>
    <a href="html/3.html" target="_blank"><img src="picture/3.png"></a>
    <a href="html/4.html" target="_blank"><img src="picture/4.png"></a>
    ....
    ....
</div>

添加样式

<style>
        img{
            height: 200px;/*设置图片宽度，不设置高度，高度跟随宽度等比例自动收缩*/
        }
        img:hover{
            opacity: 0.8;/*通过hover鼠标事件设置图片透明度*/
        }
    </style>

行内块元素

  前面关于img元素的课程并没有强调img是行内块元素，为了课程易学性，简单当做行内元素处理。 img元素是行内块元素，也就是说CSS样式属性display的属性值是inline-block，具有块元素的margin、width、height等属性。 行内块元素就像一个汉字一样会自适应网页，从左往右排列，排不下的时候，自动换行，当你拖动鼠标更改网页宽度，图片会跟着自适应填充排列。

img元素等比例缩放

  如果图片定义其中一个长度，另一个长度会自适应等比例缩放，根据这一特点，把所有img元素设置为定高度，整个网页不会混乱，同时图片不会失真。 img元素不设置宽度高度属性，他在页面上的显示取决于它的父元素大小限制，如果没有限制，显示图片原大小。 img元素的宽高度设置，可以直接使用img元素特有的width属性、height属性，也可以通过style样式属性引入块元素、行内块元素通用的width、height属性。

行内块元素

   img元素是行内块元素，也就是说CSS样式属性display的属性值是inline-block，具有块元素的margin、width、height等属性。

透明度opacity

  当你把鼠标移动到一张图片上的时候，它的会变半透明与背景色叠加，这主要通过hover鼠标事件和透明度opacity属性实现。 当他opacity的值为1的时候，一个元素不透明，当值为0的时候，完全透明，代码案例中设置为0.8。剩余的0.2与背景色颜色相乘 叠加到图片，因为网页的背景颜色是白色，所以当鼠标移动到图片上的时候，图片的实际效果是变模糊，你也可以把背景颜色设置为其他颜色， 测试opacity的使用技巧。你可以把opacity属性想象为一层玻璃，在玻璃前面看玻璃，视觉效果是玻璃与玻璃后面的物体在光照影响下的综合效果， 说到玻璃的前后问题，你应该就联想到元素的图层问题，子元素默认位于父元素的前面。