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

Question

是否有一种仅使用CSS按比例调整(缩小)图像大小的方法？我采用JavaScript的方式，但只是想看看CSS是否能做到这一点。

Answer 1

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

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

Answer 2

控制尺寸和保持比例：

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

Answer 3

如果它是一个背景图像，使用背景大小：包含。

示例CSS：

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