CSS - 响应式图像

响应式图像对于 Web 开发非常重要，因为它们可确保根据设备大小和分辨率调整图像的大小。响应式图像提高了页面加载速度，并减少了加载时间。

当图像上传到网站时，它有其默认的宽度和高度;但是可以使用 CSS 来更改这些维度。为了使图像具有响应性和流畅性，您需要为其 width 属性提供一个新值，图像的高度将自动调整到该值。

为了获得更好的适应性，应始终对 width 属性（如百分比）使用相对单位，而不是绝对值（如像素）。绝对值限制了图像的响应速度。

CSS RWD 图像 - width 属性

为了使图像具有响应性和流畅性，图像的 width 属性设置为百分比值，并将 height 属性设置为 auto。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	img {
	 	 	 width: 100%;
	 	 	 height: auto;
	 	}
</style>
</head>
<body>
	 	<p>Resize the browser window to see how the image will resize.</p>
	 	<img src="images/pink-flower.jpg">
</body>
</html>

CSS RWD 图像 - max-width 属性

为了使图像具有响应性和流畅性，将图像的 max-width 属性设置为 100%，这将使图像缩小到其设置的程度，但绝不会放大超过其原始大小。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	img {
	 	 	 max-width: 100%;
	 	 	 height: auto;
	 	}
</style>
</head>
<body>
	 	<p>Resize the browser window to see how the size of the image changes.</p>
	 	<img src="images/pink-flower.jpg">
</body>
</html>

CSS RWD 图像 - 在网格内

以下示例演示了如何在网格列中使用响应式图像。根据图像的最大宽度值，图像会根据屏幕尺寸缩小。


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	* {
	 	 	 box-sizing: border-box;
	 	}

	 	.title {
	 	 	 border: 2px solid black;
	 	 	 padding: 10px;
	 	 	 background-color: blanchedalmond;
	 	}

	 	.grid-one {
	 	 	 width: 60%;
	 	 	 float: left;
	 	 	 padding: 10px;
	 	 	 border: 2px solid black;
	 	 	 background-color: darkseagreen;
	 	}

	 	.grid-two {
	 	 	 width: 40%;
	 	 	 float: left;
	 	 	 padding: 15px;
	 	 	 border: 2px solid black;
	 	 	 background-color: lightgreen;
	 	}

	 	ul {
	 	 	 list-style-type: none;
	 	}

	 	li {
	 	 	 background-color: aqua;
	 	 	 padding: 5px;
	 	 	 border: 1px solid black;
	 	 	 margin: 5px;
	 	}

	 	img {
	 	 	 max-width: 100%;
	 	 	 height: auto;
	 	}
</style>
</head>
<body>
	 	<div class="title">
	 	<h1>Responsive Web Design</h1>
	 	</div>

	 	<div class="grid-two">
	 	<ul>
	 	 	 <li>Viewport</li>
	 	 	 <li>Grid view</li>
	 	 	 <li>Media queries</li>
	 	 	 <li>Images</li>
	 	 	 <li>Videos</li>
	 	 	 <li>Frameworks</li>
	 	</ul>
	 	</div>

	 	<div class="grid-one">
	 	<h1>Responsive Images</h1>
	 	<p>Responsive images are important for the web development, as they ensure that the images are appropriately sized based on the device size and resolution. The responsive images improve the page loading speed and also reduce the time to load it.</p>
	 	<img src="images/scenery2.jpg">
	 	<p>Resize the browser window to see how the content gets responsive to the resizing.</p>
	 	</div>
</body>
</html>

CSS RWD 图像 - 使用背景图像

还可以根据属性 background-size： contain 调整背景图像的大小或缩放。此属性将缩放图像，并尝试适应内容区域。图像的纵横比将保持不变。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	div {
	 	 	 width: 100%;
	 	 	 height: 400px;
	 	 	 background-image: url(images/pink-flower.jpg);
	 	 	 background-repeat: no-repeat;
	 	 	 background-size: contain;
	 	 	 border: 5px solid black;
	 	 	 background-color: antiquewhite;
	 	}
</style>
</head>
<body>
	 	<h1>Responsive Web Design - Images</h1>
	 	<div></div>
</body>
</html>

背景图像也可以根据属性 background-size： cover 调整大小或缩放。此属性将缩放图像，使其覆盖整个内容区域。图像的纵横比将保持不变，但背景图像的某些部分可能会被剪裁。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	div {
	 	 	 width: 100%;
	 	 	 height: 80%;
	 	 	 background-image: url(images/pink-flower.jpg);
	 	 	 background-repeat: no-repeat;
	 	 	 background-size: cover;
	 	 	 border: 5px solid red;
	 	 	 background-color: antiquewhite;
	 	}
</style>
</head>
<body>
	 	<h1>Responsive Web Design - Images</h1>
	 	<div></div>
</body>
</html>

背景图像也可以根据属性 background-size： 100% 100% 调整大小或缩放。此值将使图像被拉伸以覆盖整个内容区域。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	div {
	 	 	 width: 100%;
	 	 	 height: 80%;
	 	 	 background-image: url(images/pink-flower.jpg);
	 	 	 background-repeat: no-repeat;
	 	 	 background-size: 100% 100%;
	 	 	 border: 5px solid red;
	 	 	 background-color: antiquewhite;
	 	}
</style>
</head>
<body>
	 	<h1>Responsive Web Design - Images</h1>
	 	<div></div>
</body>
</html>

CSS RWD 图像 - 使用媒体查询

当您需要在不同设备上以不同大小显示图像时，您需要使用媒体查询。以下示例显示了一种屏幕的宽度为 50% 的图像，但为了使其适用于移动设备的全尺寸，将使用媒体查询。


<html>
<head>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	/* For width smaller than 400px: */
	 	body {
	 	 	 background-repeat: no-repeat;
	 	 	 background-image: url(images/orange-flower.jpg);	
	 	}

	 	/* For width 400px and larger: */
	 	@media only screen and (min-width: 700px) {
	 	 	 body {	
	 	 	 	 	background-image: url(images/pink-flower.jpg);	
	 	 	 	 	background-size: cover;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p style="margin-top:360px;color:white;">Resize the browser width and the background image will change at 400px.</p>
</body>
</html>

打印本页