网页设计 – 图片视频

在响应式网页设计中，图片或视频的大小通过CSS布局控制要达到能自动适应网页大小变动，这样才能让图片或视频在页面上更好的展示。

图片

图片的with属性可以控制图片的宽度，通过设置图片的width:100%可以让图片在网页中自适应。

示例

img {
    width: 100%;
    height: auto;
}

需要注意，如果网页的宽度大于图片宽度时，图片展示会比它的原始图片大。但我们可以使用 max-width 属性来很好的解决这个问题。

示例

img {
    max-width: 100%;
    height: auto;
}

上面的示例，可以保证图片不会超过原始图片大小。

下面是一个图片在响应式网页中的示例，可以通过该示例来学习图片在网页中css设置。

背景图片设置

背景图片也可以设置为响应调整大小或缩放，常用以下三种方法：

1、设置 background-size 属性为 "contain", 背景图片将按比例自适应内容区域，并且图片保持其比例不变。

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

2、设置background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

3、设置 background-size 属性设置为 "cover"，则背景图像扩展至足够大，以使背景图像完全覆盖背景区域。需要注意，该属性保持了图片的比例，故背景图像的某些部分无法显示在背景定位区域中。

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

不同设备显示不同图片

通过媒体查询，我们可以控制网页在不同的屏幕大小下显示不同的图片，这样可以达到更好的设计效果。

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

除了上面的方式，你还可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小并不会改变。

/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

HTML5 <picture> 元素

HTML5 的 <picture> 元素支持设置多张图片。

浏览器支持

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

srcset 属性的必须的，定义了图片资源。

media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。

对于不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。

视频

width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：

video {
    width: 100%;
    height: auto;
}

注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。

如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：

video {
    max-width: 100%;
    height: auto;
}

我么看到video标签和image标签在自适应网页中CSS设置很相似，其目的都是让元素内容更好的适应网页大小自动展示。

如果想了解更多关于video标签的使用，可以参看HTML5教程中HTML5 video章节。