响应式网页设计 - 图像

调整浏览器窗口的大小以查看图像如何缩放以适应页面。


使用 width 属性

如果 width 属性设置为百分比,且高度设置为 "auto",则图像将进行响应来放大或缩小:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. img {
  7. width: 100%;
  8. height: auto;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <img src="/images/shanghai.jpg" width="460" height="306">
  14. <p>调整浏览器窗口的大小,来查看图像如何缩放。</p>
  15. </body>
  16. </html>

请注意,在上面的例子中,图像可以放大到大于其原始大小。在多数情况下,更好的解决方案是改为使用 max-width 属性。


使用 max-width 属性

如果将 max-width 属性设置为 100%,则图像将按需缩小,但绝不会放大到大于其原始大小:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. img {
  7. max-width: 100%;
  8. height: auto;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <img src="/znadmin/md/1325/0.jpg" width="460" height="306">
  14. <p>请调整浏览器窗口的大小,来查看宽度小于 460 像素时图像如何缩放。</p>
  15. </body>
  16. </html>

向实例网页添加图像

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7. box-sizing: border-box;
  8. }
  9. img {
  10. width: 100%;
  11. height: auto;
  12. }
  13. .row:after {
  14. content: "";
  15. clear: both;
  16. display: table;
  17. }
  18. [class*="col-"] {
  19. float: left;
  20. padding: 15px;
  21. width: 100%;
  22. }
  23. @media only screen and (min-width: 600px) {
  24. .col-s-1 {width: 8.33%;}
  25. .col-s-2 {width: 16.66%;}
  26. .col-s-3 {width: 25%;}
  27. .col-s-4 {width: 33.33%;}
  28. .col-s-5 {width: 41.66%;}
  29. .col-s-6 {width: 50%;}
  30. .col-s-7 {width: 58.33%;}
  31. .col-s-8 {width: 66.66%;}
  32. .col-s-9 {width: 75%;}
  33. .col-s-10 {width: 83.33%;}
  34. .col-s-11 {width: 91.66%;}
  35. .col-s-12 {width: 100%;}
  36. }
  37. @media only screen and (min-width: 768px) {
  38. .col-1 {width: 8.33%;}
  39. .col-2 {width: 16.66%;}
  40. .col-3 {width: 25%;}
  41. .col-4 {width: 33.33%;}
  42. .col-5 {width: 41.66%;}
  43. .col-6 {width: 50%;}
  44. .col-7 {width: 58.33%;}
  45. .col-8 {width: 66.66%;}
  46. .col-9 {width: 75%;}
  47. .col-10 {width: 83.33%;}
  48. .col-11 {width: 91.66%;}
  49. .col-12 {width: 100%;}
  50. }
  51. html {
  52. font-family: "Lucida Sans", sans-serif;
  53. }
  54. .header {
  55. background-color: #9933cc;
  56. color: #ffffff;
  57. padding: 15px;
  58. }
  59. .menu ul {
  60. list-style-type: none;
  61. margin: 0;
  62. padding: 0;
  63. }
  64. .menu li {
  65. padding: 8px;
  66. margin-bottom: 7px;
  67. background-color :#33b5e5;
  68. color: #ffffff;
  69. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  70. }
  71. .menu li:hover {
  72. background-color: #0099cc;
  73. }
  74. .aside {
  75. background-color: #33b5e5;
  76. padding: 15px;
  77. color: #ffffff;
  78. text-align: center;
  79. font-size: 14px;
  80. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  81. }
  82. .footer {
  83. background-color: #0099cc;
  84. color: #ffffff;
  85. text-align: center;
  86. font-size: 12px;
  87. padding: 15px;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div class="header">
  93. <h1>Shanghai</h1>
  94. </div>
  95. <div class="row">
  96. <div class="col-3 col-s-3 menu">
  97. <ul>
  98. <li>交通</li>
  99. <li>文化</li>
  100. <li>旅游</li>
  101. <li>美食</li>
  102. </ul>
  103. </div>
  104. <div class="col-6 col-s-9">
  105. <h1>欢迎来到上海</h1>
  106. <p>上海市,简称沪,别称申,是中华人民共和国直辖市,中国的经济、金融、贸易和航运中心,世界著名的港口城市,是中国人口第二多的城市。</p>
  107. <img src="/images/shanghai.jpg" width="460" height="306">
  108. </div>
  109. <div class="col-3 col-s-12">
  110. <div class="aside">
  111. <h2>历史</h2>
  112. <p>最晚在新石器时代,上海地区已经有先民聚居。春秋时代,上海由吴国管辖,战国时代则是楚国领土 ...</p>
  113. <h2>位置</h2>
  114. <p>上海位于中国东部弧形海岸线的正中间,长江三角洲最东部,东临东海,南濒杭州湾,西与江苏、浙江两省相接 ...</p>
  115. <h2>环境</h2>
  116. <p>上海地处江南水乡,并位于长江入海口,亦不处于主要地震带上,因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="footer">
  121. <p>请调整浏览器窗口的大小,来查看内容如何响应调整大小。</p>
  122. </div>
  123. </body>
  124. </html>

背景图像

背景图像也可以响应调整大小和缩放比例。

这是我们展示的三种不同方法:

1、如果将 background-size 属性设置为 "contain",则背景图像将缩放,并尝试匹配内容区域。不过图像将保持其长宽比(图像宽度与高度之间的比例关系):

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. div {
  7. width: 100%;
  8. height: 400px;
  9. background-image: url('/i/photo/flower-5.jpg');
  10. background-repeat: no-repeat;
  11. background-size: contain;
  12. border: 1px solid red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p>请调整浏览器窗口大小来查看效果。</p>
  18. <div></div>
  19. </body>
  20. </html>

2、如果将 background-size 属性设置为 "100% 100%",则背景图像将拉伸以覆盖整个内容区域:

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. div {
  7. width: 100%;
  8. height: 400px;
  9. background-image: url('/znadmin/md/1325/1.jpg');
  10. background-size: 100% 100%;
  11. border: 1px solid red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p>请调整浏览器窗口大小来查看效果。</p>
  17. <div></div>
  18. </body>
  19. </html>

3、如果 background-size 属性设置为 "cover",则背景图像将缩放以覆盖整个内容区域。请注意,"cover" 值保持长宽比,且可能会裁剪背景图像的某部分:

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. div {
  7. width: 100%;
  8. height: 400px;
  9. background-image: url('/znadmin/md/1325/1.jpg');
  10. background-size: cover;
  11. border: 1px solid red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p>请调整浏览器窗口大小来查看效果。</p>
  17. <div></div>
  18. </body>
  19. </html>

为不同设备准备不同图像

大幅的图像在大型计算机屏幕上可以完美显示,但在小型设备上就没用了。为什么在不得不缩小图像时又加载大图像呢?为了减少负载或出于任何其他原因,您可以使用媒体查询在不同的设备上显示不同的图像。

这是一幅大图像和一幅小图像,会在不同的设备上显示:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. /* 针对宽度小于 400 像素的设备: */
  7. body {
  8. background-repeat: no-repeat;
  9. background-image: url('/znadmin/md/1325/2.jpg');
  10. }
  11. /* 针对宽度大于等于 400 像素的设备: */
  12. @media only screen and (min-width: 400px) {
  13. body {
  14. background-image: url('/znadmin/md/1325/1.jpg');
  15. }
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <p style="margin-top:660px;">请调整浏览器宽度,背景图像会在 400 像素(这个断点)发生变化。</p>
  21. </body>
  22. </html>

您可以使用媒体查询 min-device-width 而不是 min-width 来检查设备宽度,而不是浏览器宽度。然后,当您调整浏览器窗口的大小时,图像将不会变化:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. /* 针对宽度小于 400 像素的设备: */
  7. body {
  8. background-repeat: no-repeat;
  9. background-image: url('/znadmin/md/1325/2.jpg');
  10. }
  11. /* 针对宽度大于等于 400 像素的设备: */
  12. @media only screen and (min-device-width: 400px) {
  13. body {
  14. background-image: url('/znadmin/md/1325/1.jpg');
  15. }
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. </body>
  21. </html>

HTML5 <picture> 元素

HTML5 引入了 <picture> 元素,该元素使您可以定义多幅图像。

浏览器支持
38.01338.09.125.0

<picture> 元素的作用类似于 <video><audio> 元素。我们设置了不同的来源,而匹配优先权的第一个来源是正在使用的来源:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. </head>
  6. <body>
  7. <picture>
  8. <source srcset="/znadmin/md/1325/2.jpg" media="(max-width: 400px)">
  9. <source srcset="/znadmin/md/1325/1.jpg">
  10. <img src="/znadmin/md/1325/1.jpg" alt="Flowers" style="width:auto;">
  11. </source></source></picture>
  12. <p>请调整浏览器宽度,图像会在 400 像素(这个断点)发生变化。</p>
  13. </body>
  14. </html>

srcset 属性是必需的,它定义图像的来源。media 属性是可选的,它接受可在 CSS @media 规则 中找到的媒体查询。提示:您还应该为不支持 <picture> 元素的浏览器定义 <img> 元素。

分类导航