css-img图像同比缩小

2024-01-09 17:45:20
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%，我们可以实现图像按比例缩小并且保持其宽高比。将图像的高度设置为自适应，因此当图像宽度改变时，其高度也会相应地进行调整。

文章来源:https://blog.csdn.net/2301_76671906/article/details/135484056
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。