css-img图像同比缩小

发布时间:2024年01月09日
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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。