1. HTML 中使图像按比例缩小
CSS 来控制图像的大小，并保持其宽高比
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 300px; /* 设置容器宽度 */
height: auto; /* 让高度自适应 */
}
.image-container img {
width: 100%; /* 图像宽度填满容器 */
height: auto; /* 让高度自适应，保持宽高比 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>创建了一个包含图像的容器，并使用 CSS 来控制图像的大小。
通过将容器的宽度设置为固定值，然后将图像的宽度设置为100%，我们可以实现图像按比例缩小并且保持其宽高比。将图像的高度设置为自适应，因此当图像宽度改变时，其高度也会相应地进行调整。
