css - 缩放具有不同宽度和高度的动态图像

Question

我在标题中有图像并从数据库中填充它的来源，因此它具有不同的宽度和高度。图片尺寸最大为 2000x2000 像素。我正在尝试缩放它，但是当它非常大时，例如超过 1000 像素，它就非常大而且看起来不太好。这是我目前拥有的。

#image {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
  height: 50px;
}

<div id="wrapper">
  <img src="some-dynamic-url" id="image">
</div>

我也尝试过 background-size: cover 但它没有拉伸(stretch)以及如何保持纵横比并设置 max-width 和 max-height不要这么大？

已更新。我当前的代码如下:

#image {
  display: block;
  top: 20px;
  left: 20px;
  width: 100%;
  max-width: 170px;
}

<div id="wrapper">
  <img src="some-dynamic-url" id="image">
</div>

Answer 1

高度总是50px吗？如果不是，您应该从您的 CSS 中删除它并改为使用 height: auto;。

另外，如果它在 1000px x 1000px 时开始看起来不太好，可以设置 width: 1000px; 和 max-width: 85%; 以保持它在该宽度并使其在较小的屏幕上响应。您可以根据自己的喜好调整最大宽度值或将其删除。

因此，CSS 将更改为:

#image {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
  width: 1000px;
  max-width: 85%; /* adjust as needed or remove */
  height: auto;
}

Here's an example .