CSS3 响应式图片样式

CSS 可以用来创建图片画廊。本例使用媒体查询(media queries)在不同的屏幕大小上重新排列图像。调整浏览器窗口的大小以查看效果:

Cinque Terre
在此处添加图像描述
Forest
在此处添加图像描述
Northern Lights
在此处添加图像描述
Mountains
在此处添加图像描述

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div.gallery {
  6. border: 1px solid #ccc;
  7. }
  8. div.gallery:hover {
  9. border: 1px solid #777;
  10. }
  11. div.gallery img {
  12. width: 100%;
  13. height: auto;
  14. }
  15. div.desc {
  16. padding: 15px;
  17. text-align: center;
  18. }
  19. * {
  20. box-sizing: border-box;
  21. }
  22. .responsive {
  23. padding: 0 6px;
  24. float: left;
  25. width: 24.99999%;
  26. }
  27. @media only screen and (max-width: 700px) {
  28. .responsive {
  29. width: 49.99999%;
  30. margin: 6px 0;
  31. }
  32. }
  33. @media only screen and (max-width: 500px) {
  34. .responsive {
  35. width: 100%;
  36. }
  37. }
  38. .clearfix:after {
  39. content: "";
  40. display: table;
  41. clear: both;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <h2>自适应图片画廊</h2>
  47. <h4>调整浏览器窗口的大小以查看效果。</h4>
  48. <div class="responsive">
  49. <div class="gallery">
  50. <a target="_blank" href="img_5terre.jpg">
  51. <img src="/znadmin/md/1298/0.jpg" alt="Cinque Terre" width="600" height="400">
  52. </a>
  53. <div class="desc">在此处添加图像描述</div>
  54. </div>
  55. </div>
  56. <div class="responsive">
  57. <div class="gallery">
  58. <a target="_blank" href="img_forest.jpg">
  59. <img src="/znadmin/md/1298/1.jpg" alt="Forest" width="600" height="400">
  60. </a>
  61. <div class="desc">在此处添加图像描述</div>
  62. </div>
  63. </div>
  64. <div class="responsive">
  65. <div class="gallery">
  66. <a target="_blank" href="img_lights.jpg">
  67. <img src="/znadmin/md/1298/2.jpg" alt="Northern Lights" width="600" height="400">
  68. </a>
  69. <div class="desc">在此处添加图像描述</div>
  70. </div>
  71. </div>
  72. <div class="responsive">
  73. <div class="gallery">
  74. <a target="_blank" href="img_mountains.jpg">
  75. <img src="/znadmin/md/1298/3.jpg" alt="Mountains" width="600" height="400">
  76. </a>
  77. <div class="desc">在此处添加图像描述</div>
  78. </div>
  79. </div>
  80. <div class="clearfix"></div>
  81. <div style="padding:6px;">
  82. <p>这个例子使用媒体查询(media queries)来重新排列不同屏幕尺寸上的图像:对于宽度大于700px的屏幕,它将并排显示四个图像;对于小于700px的屏幕,它将并排显示两个图像。对于小于500px的屏幕,图像将垂直堆叠(100%)。</p>
  83. <p>在我们的 CSS 教程中,您将进一步了解 媒体查询 和 响应式web设计 。</p>
  84. </div>
  85. </body>
  86. </html>

分类导航