这个视频我们来看一下响应式的图像 … 先打开网页 …. 插入一张图像 ... 可以把它放在一个 <div> 标签上 …. 在上面定义一个叫 showcase 的 ID ..

里面是图像的 <img> 标签 … 再添加一个 src 属性 … 指定图像的位置 …. 插入在 images 目录下的 01.jpg 这个图像 …

保存 … 打开浏览器 …

因为图像比较大 … 所以会超出布局的宽度 … 调整可视窗口的大小 … 图像的宽度也没有什么变化 …

其实让页面上的图像跟着布局的宽度的变化而变化很简单 …. 只需要把图像的宽度设置成 100% 就行了 ..

样式

打开网页的样式表，可以使用图像的标签作为样式的选择器 img {}

w100p

如果你想确定图像不会被拉伸的话，可以再加上一个 max-width:100%
保存 … 回到浏览器 …

现在图像的宽度正好是包装它的容器的宽度 …

调整一下窗口的宽度 …. 你会发现 … 图像的宽度也会随着变化 …

背景

如果页面上的图像不是用 <img> 标签插入的 … 而是背景 … 同样可以让它变成响应式的 …

回到网页 … 去掉这个 #showcase 下面的 <img> 标签 …

打开网页的样式表 …

为 #showcase 添加一个背景 … #showcase{}

先给 showcase 容器指定一个高度 … h500

然后用 background 设置背景图像 … bg+ …. images/01.jpg …. 修改一下背景图像的位置 … 50% 50% … 让它垂直居中 …

最后我们需要添加让背景变成响应式设计的最关键的样式 .. 设置背景尺寸为 100% …

bgsz100p

这里编辑器为我们添加了两条样式 … background-size 是标准的写法 … 前面带 -webkit- 表示这是专门针对 webkit 核心的浏览器的样式 … 这样做是为了更好的兼容性 …

保存一下 ..

回到浏览器 ….

背景的宽度跟容器的宽度一样 …. 高度是我们设置的容器的高度 … 500px

调整窗口的尺寸 ….

背景图像的宽度也会随着变化 …. 不过这里会出现一个问题 …. 因为们设置了 shoecase 容器的固定的高度 …

当可视窗口宽度比较小的时候 … 会造成背景图像的上面和下面留出很多的空白 …

在下面的视频里，我们再来解决这个问题 ….

#showcase{
height: 500px;
background: #fff url(../images/01.jpg) 0 50% no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}