HTML中img图片进行等比例缩放的实例代码
在HTML中，要使图片等比缩放，可以通过设置图片的宽度或高度之一，并让浏览器自动计算另一个维度以保持图片的原始比例。这可以通过CSS来实现。
以下是一个简单的例子，演示如何使用CSS来等比缩放图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>等比缩放图片示例</title>
<style>
.responsive-img {
max-width: 100%; /* 最大宽度为父容器宽度 */
height: auto; /* 高度自动缩放以保持比例 */
}
</style>
</head>
<body>
<img src="path-to-your-image.jpg" alt="描述文字" class="responsive-img">
</body>
</html>在这个例子中，.responsive-img 类定义了图片的最大宽度为100%（即父容器的宽度），并且高度自动调整以保持图片原有的比例。这样，无论图片原始尺寸如何，它都会在不超出其父容器的情况下最大程度地填充空间。
评论已关闭