轻松上手生成响应式图像Responsive Image

在HTML中使图像具有响应性（Responsive），可以使用CSS来将图像的最大宽度设置为其容器的100%。这样可以确保图像在适应较小屏幕时按比例缩小，同时保持其长宽比。

<!DOCTYPE html>
<html>
<head>
	<style>
 	img {
 		max-width: 100%;
 		height: auto;
 	}
 	</style>
</head>
<body>
	<article>
		<img src="a-beautiful-day.jpg" alt="示例图像">
	</article>
</body>
</html>

在这个例子中，CSS规则max-width: 100%; 确保图像不会超过其容器的宽度，事实上是填充其容器的宽度，而height: auto;则确保在屏幕大小改变时保持图像的长宽比例。图像将根据其容器的宽度调整大小，从而使其在不同设备和屏幕尺寸上具有响应性。

这样做有一个前提条件，就是图像的容器（在上例中是<article></article>）的宽度不能是固定的，比如：

<style>
 	article {
 		width: 768px;
 	}
</style>

最后，尝试在不同装置中打开本页面，或在桌面电脑上改变浏览器窗口的宽度来观察下面图像。这张美丽的科罗拉多风景照随着网页宽度的改变而改变。

互联网

科技