加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

响应式网页设计 - 图像

css3基础 2022-05-23 12:09:43小码哥的IT人生shichen

响应式网页设计 - 图像

使用 width 属性

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

示例代码：

img {
  width: 100%;
  height: 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="/i/photo/shanghai.jpg" width="460" height="306">
<p>调整浏览器窗口的大小，来查看图像如何缩放。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

使用 max-width 属性

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

示例代码：

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

 

完整实例【亲自试一试】：

<!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="/i/photo/shanghai.jpg" width="460" height="306">
<p>请调整浏览器窗口的大小，来查看宽度小于 460 像素时图像如何缩放。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

向实例网页添加图像

示例代码：

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

 

完整实例【亲自试一试】：

<!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="/i/photo/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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

背景图像

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

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

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

 

这是 CSS 代码：

示例代码：

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

 

完整实例【亲自试一试】：

<!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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

 

这是 CSS 代码：

示例代码：

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

 

完整实例【亲自试一试】：

<!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-size: 100% 100%;
  border: 1px solid red;
}
</style>
</head>
<body>
<p>请调整浏览器窗口大小来查看效果。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

 

这是 CSS 代码：

示例代码：

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

 

完整实例【亲自试一试】：

<!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-size: cover;
  border: 1px solid red;
}
</style>
</head>
<body>
<p>请调整浏览器窗口大小来查看效果。</p>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

为不同设备准备不同图像

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

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

示例代码：

/* 针对小于 400 像素的宽度： */
body {
  background-image: url('img_smallflower.jpg');
}
/* 针对 400 像素或更大的宽度： */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

 

完整实例【亲自试一试】：

<!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('/i/photo/tulip_peach_blossom_s.jpg');
}
/* 针对宽度大于等于 400 像素的设备： */
@media only screen and (min-width: 400px) {
  body {
     background-image: url('/i/photo/flower-5.jpg');
  }
}
</style>
</head>
<body>
<p style="margin-top:660px;">请调整浏览器宽度，背景图像会在 400 像素（这个断点）发生变化。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

示例代码：

/* 针对小于 400 像素的设备： */
body {
  background-image: url('img_smallflower.jpg');
}
/* 针对 400 像素及更大的设备： */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

 

完整实例【亲自试一试】：

<!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('/i/photo/tulip_peach_blossom_s.jpg');
}
/* 针对宽度大于等于 400 像素的设备： */
@media only screen and (min-device-width: 400px) {
  body {
     background-image: url('/i/photo/flower-5.jpg');
  }
}
</style>
</head>
<body>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

HTML5 <picture> 元素

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

浏览器支持

         
38.0 13 38.0 9.1 25.0

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

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
  <source srcset="/i/photo/tulip_peach_blossom_s.jpg" media="(max-width: 400px)">
  <source srcset="/i/photo/flower-5.jpg">
  <img src="/i/photo/flower-5.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>请调整浏览器宽度，图像会在 400 像素（这个断点）发生变化。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

srcset 属性是必需的，它定义图像的来源。

media 属性是可选的，它接受可在 CSS @media 规则 中找到的媒体查询。

提示：您还应该为不支持 <picture> 元素的浏览器定义 <img> 元素。

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024