使用 CSS 按比例调整图像大小？

有没有一种方法可以仅使用 CSS 按比例调整图像大小（缩小）？

我正在使用 JavaScript 方式，但只是尝试查看 CSS 是否可行。

html css image-resizing

答案

要使用 CSS 按比例调整图像大小，请执行以下操作：

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

控制大小并保持比例：

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

如果是背景图像，请使用 background-size：contain。

示例 CSS：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}