您的位置: 首页 > 软件教程 > HTML教程专题 > 如何使用HTML5的picture元素处理响应式图片

如何使用HTML5的picture元素处理响应式图片

9.0分
出处:网络 时间:2017-02-17

您可能感兴趣的话题: HTML5  

核心提示:在宽屏显示器,互联网电视,多尺寸的平板电脑和智能手机的今天,我们的设计必须应付一切可能,将宽由320px向7680px转变。

  图片是响应式网页设计最具挑战性的一大问题。今天我们就来看看如何使用元素来处理响应式图片.

  让我们先了解一下问题

  固定宽度,像素完美的网站设计已经离我们远去了。在宽屏显示器,互联网电视,多尺寸的平板电脑和智能手机的今天,我们的设计必须应付一切可能,将宽由320px向7680px转变。

  伴随这种多分辨率风景而至的,是需要拉伸或收缩图像,以适应这些不同的要求。这可以被理解为如下问题,矢量图形出现异常时,绝大多数具有特定像素的图像宽度并不改变。

  所以,我们应该怎么做呢?

  目前最常见的解决方案

  作为一般规则,你会在任何响应式网站中发现以下CSS样式:

1img {
2    max-width: 100%;
3    height: auto;
4}

  此代码使用max-width:100%的设置,以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度,图像将随之缩小。height:auto的设置可以确保当有这种情况发生时,图像将以自身的宽高比保留。

如何使用HTML5的picture元素处理响应式图片

  这解决了一方面的问题,使我们能够在许多不同的情况下显示相同的图像。不过,这并不能让我们对不同的情况指定不同的图像。

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
JavaScript是基于对象和事件驱动并具... [详细]