css图片等比例缩放宽高

要实现CSS图片等比例缩放并且保持宽高比，可以采用以下两种方法：

方法一：使用 max-width 和 max-height 属性

img {
  max-width: 100%;
  max-height: 100%;
}

这种方法的原理是将图片的最大宽度和最大高度都设置为100%，这样无论图片的原始大小是多少，都会被缩放到宽度或高度不超过父元素的大小。

方法二：使用 object-fit 属性

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

这种方法的原理是将图片的宽度和高度都设置为100%，然后使用 object-fit 属性将图片等比例缩放并居中显示在元素内部。其中，contain 值表示将图片缩放至宽度或高度不超过父元素大小，并保持图片原始比例。

以上两种方法均可以实现CSS图片等比例缩放并保持宽高比。具体使用方法可以根据实际需求选择。

相关问题

css图片等比例缩放

你可以使用 CSS 中的 `object-fit` 属性来实现图片的等比例缩放，同时保持其宽高比。具体操作如下：

1. 在 CSS 中选中你想要缩放的图片元素，比如 `img` 标签或者一个带有背景图片的 `div`。

2. 设置 `width` 和 `height` 属性为你想要图片显示的大小。

3. 添加 `object-fit: cover;` 属性，这会让图片在保持原始宽高比的同时，填充整个容器。

例如，下面的 CSS 代码可以将一个宽为 200px，高为 200px 的图片缩放至一个宽为 100px，高为 100px 的容器中：

img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

这样可以确保图片不会被拉伸或压缩，同时完全填满容器。你也可以使用其他的 `object-fit` 值，比如 `contain`，这会让图片在原始尺寸内居中显示，但可能会留有空白区域。

css 图片等比例缩小

可以通过设置 `max-width` 和 `max-height` 属性来实现图片等比例缩小。具体代码如下：

img {
  max-width: 100%;
  max-height: 100%;
}

这样设置后，图片会自动缩小，同时保持原始宽高比例，不会变形。如果希望图片在容器中居中显示，可以再加上 `display: block; margin: 0 auto;` 来实现。