css img 适配尺寸_img图片自适应布局_HTML5教程_郭隆邦技术博客

图片自适应布局

源码下载

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

可以跳转到一个页面只有一张图片，显示的尺寸是图片的原大小尺寸。

创建内容

首先要做的是创建一个index.html文件来呈现搜索界面，然后创建两个文件夹，名为picture文件夹用来存放所有图片集中管理，名为html文件夹用来存放每一张图片独占的

html文档。实现在index.html页面点击一张图片，然后跳转到一个新的html页面显示图片原尺寸。

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

html文件夹中第一个html文件

index.html文件代码

....

....

添加样式

行内块元素

前面关于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属性想象为一层玻璃，在玻璃前面看玻璃，视觉效果是玻璃与玻璃后面的物体在光照影响下的综合效果，

说到玻璃的前后问题，你应该就联想到元素的图层问题，子元素默认位于父元素的前面。