响应式网页设计 - 图像
调整浏览器窗口的大小以查看图像如何缩放以适应页面。
使用 width 属性
如果 width
属性设置为百分比,且高度设置为 "auto",则图像将进行响应来放大或缩小:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="/images/shanghai.jpg" width="460" height="306">
<p>调整浏览器窗口的大小,来查看图像如何缩放。</p>
</body>
</html>
请注意,在上面的例子中,图像可以放大到大于其原始大小。在多数情况下,更好的解决方案是改为使用 max-width
属性。
使用 max-width 属性
如果将 max-width 属性设置为 100%,则图像将按需缩小,但绝不会放大到大于其原始大小:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="/znadmin/md/1325/0.jpg" width="460" height="306">
<p>请调整浏览器窗口的大小,来查看宽度小于 460 像素时图像如何缩放。</p>
</body>
</html>
向实例网页添加图像
实例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Shanghai</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>交通</li>
<li>文化</li>
<li>旅游</li>
<li>美食</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>欢迎来到上海</h1>
<p>上海市,简称沪,别称申,是中华人民共和国直辖市,中国的经济、金融、贸易和航运中心,世界著名的港口城市,是中国人口第二多的城市。</p>
<img src="/images/shanghai.jpg" width="460" height="306">
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>历史</h2>
<p>最晚在新石器时代,上海地区已经有先民聚居。春秋时代,上海由吴国管辖,战国时代则是楚国领土 ...</p>
<h2>位置</h2>
<p>上海位于中国东部弧形海岸线的正中间,长江三角洲最东部,东临东海,南濒杭州湾,西与江苏、浙江两省相接 ...</p>
<h2>环境</h2>
<p>上海地处江南水乡,并位于长江入海口,亦不处于主要地震带上,因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
</div>
</div>
</div>
<div class="footer">
<p>请调整浏览器窗口的大小,来查看内容如何响应调整大小。</p>
</div>
</body>
</html>
背景图像
背景图像也可以响应调整大小和缩放比例。
这是我们展示的三种不同方法:
1、如果将 background-size
属性设置为 "contain",则背景图像将缩放,并尝试匹配内容区域。不过图像将保持其长宽比(图像宽度与高度之间的比例关系):
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100%;
height: 400px;
background-image: url('/i/photo/flower-5.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
</style>
</head>
<body>
<p>请调整浏览器窗口大小来查看效果。</p>
<div></div>
</body>
</html>
2、如果将 background-size
属性设置为 "100% 100%",则背景图像将拉伸以覆盖整个内容区域:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100%;
height: 400px;
background-image: url('/znadmin/md/1325/1.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>请调整浏览器窗口大小来查看效果。</p>
<div></div>
</body>
</html>
3、如果 background-size
属性设置为 "cover",则背景图像将缩放以覆盖整个内容区域。请注意,"cover" 值保持长宽比,且可能会裁剪背景图像的某部分:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100%;
height: 400px;
background-image: url('/znadmin/md/1325/1.jpg');
background-size: cover;
border: 1px solid red;
}
</style>
</head>
<body>
<p>请调整浏览器窗口大小来查看效果。</p>
<div></div>
</body>
</html>
为不同设备准备不同图像
大幅的图像在大型计算机屏幕上可以完美显示,但在小型设备上就没用了。为什么在不得不缩小图像时又加载大图像呢?为了减少负载或出于任何其他原因,您可以使用媒体查询在不同的设备上显示不同的图像。
这是一幅大图像和一幅小图像,会在不同的设备上显示:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 针对宽度小于 400 像素的设备: */
body {
background-repeat: no-repeat;
background-image: url('/znadmin/md/1325/2.jpg');
}
/* 针对宽度大于等于 400 像素的设备: */
@media only screen and (min-width: 400px) {
body {
background-image: url('/znadmin/md/1325/1.jpg');
}
}
</style>
</head>
<body>
<p style="margin-top:660px;">请调整浏览器宽度,背景图像会在 400 像素(这个断点)发生变化。</p>
</body>
</html>
您可以使用媒体查询 min-device-width
而不是 min-width
来检查设备宽度,而不是浏览器宽度。然后,当您调整浏览器窗口的大小时,图像将不会变化:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 针对宽度小于 400 像素的设备: */
body {
background-repeat: no-repeat;
background-image: url('/znadmin/md/1325/2.jpg');
}
/* 针对宽度大于等于 400 像素的设备: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('/znadmin/md/1325/1.jpg');
}
}
</style>
</head>
<body>
</body>
</html>
HTML5 <picture> 元素
HTML5 引入了 <picture>
元素,该元素使您可以定义多幅图像。
浏览器支持
38.0 | 13 | 38.0 | 9.1 | 25.0 |
<picture>
元素的作用类似于 <video>
和 <audio>
元素。我们设置了不同的来源,而匹配优先权的第一个来源是正在使用的来源:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source srcset="/znadmin/md/1325/2.jpg" media="(max-width: 400px)">
<source srcset="/znadmin/md/1325/1.jpg">
<img src="/znadmin/md/1325/1.jpg" alt="Flowers" style="width:auto;">
</source></source></picture>
<p>请调整浏览器宽度,图像会在 400 像素(这个断点)发生变化。</p>
</body>
</html>
srcset
属性是必需的,它定义图像的来源。media
属性是可选的,它接受可在 CSS @media 规则 中找到的媒体查询。提示:您还应该为不支持 <picture>
元素的浏览器定义 <img>
元素。