本文介绍了如何在HTML中使用CSS控制图片大小，通过设置容器宽度和图片宽度为100%，保持图片按比例缩放，同时高度自适应，确保宽高比不变。
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%，我们可以实现图像按比例缩小并且保持其宽高比。将图像的高度设置为自适应，因此当图像宽度改变时，其高度也会相应地进行调整。
5490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
