Question

我在标题中有图像，并从数据库填充了它的源，因此它具有不同的宽度和高度。图片尺寸最大为2000x2000px。我正在尝试缩放它，但是当它很大时（例如，超过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，但是它没有拉伸，如何保持宽高比并将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。

Answer 2

如果我理解正确，那么您将在标头容器区域中填充各种图像，有时这些图像对于容器来说太大了，看起来也不好。（如果我的摘要有误，请使用屏幕截图。）

这里的技巧是将图像宽度设置为100％，然后为图像或标题容器设置最大宽度。（在此示例中，我选择了1200像素。）这可以确保您的图像将填满所有空间，但不会溢出。

注意：这将导致宽度小于1200像素的图像被拉伸以适合显示，而且看起来也不好，并且需要更多编码才能解决。

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

<div id="wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG" id="image">
</div>

但是，如果您要寻找小于2000px宽的图像的解决方法，建议您使用诸如将彩色背景居中或平铺它们的方法。这些解决方案对于某些内容将是有益的，而对于其他内容则是丑陋的-它取决于您的图像和网站外观。但这是一些想法。

Answer 3

您可能希望使用简单的技巧来自动将尺寸调整为：

img { max-width: 1200px; height: auto;}

我猜高度不是50px，因为您认为在backround属性中使用“ cover”。另外，如果您希望图像具有这种行为，则可以添加“ object-fit：cover;”。

在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

编辑

您还可以使用该版本的“技巧”：

img { max-height: 100px; width: auto; }

注意：建议不要使用大的徽标文件。如果您可以访问数据库，则应考虑将副本保存到像素更少的更多精简版本。

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

3 个答案: