如何缩放和居中图像并使图像之间的空间成比例答案

【问题标题】：How to scale and center an image and make the space between images proportional如何缩放和居中图像并使图像之间的空间成比例
【发布时间】：2020-12-18 14:25:47
【问题描述】：

首先，我很抱歉；我是设计师，不是程序员。我必须创建一个网页来与客户共享徽标。我通过反复试验写了一些比足够好的东西更好的东西，但现在我想尝试让它变得更好。

该网页仅包含四张图片。我希望最上面的图像居中并缩放以适合查看器的浏览器窗口。我查看了示例代码，但我无法让它工作。 [旁白：在我尝试的十几个样本中，没有一个是彼此相似的。我很惊讶有这么多方法可以做同样的事情——但我还是想不通。]

如果该解决方案可以解决我在页面上遇到的一个小问题，那就太好了：顶部图像的高度缩放到窗口高度的 75%（95% 的时间水平适合），但是在查看时在又高又窄的屏幕（如手机）上，图像的右侧被截断。是否可以根据窗口的高度或宽度进行缩放？

最后，我想在图像之间留出空间，我现在通过填充来实现。然而，这意味着它是一个固定的 50 像素，而不管图像的大小与窗口的宽度成正比。是否可以将内边距设置为图像高度的 25%？

谢谢你，皮特

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Saltwater Logos</title>
    
    <style>
html, body {
  height: 100%;
}
        
img.icon {
  height: 75vh;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
        
img.logo {
  height: 90%;
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}

</style>    
</head>
    
<body style="background-color:black;">
        <div>
            <img class="icon" src="logo/Icon.png" alt="Icon">
            <img class="logo" src="logo/Positive.jpg" alt="Positive" align="center">
            <img class="logo" src="logo/Negative.jpg" alt="Negative" align="center">
            <img class="logo" src="logo/BlackWhite.png" alt="Black & White" align="center">
        </div>
</body>
</html>

【问题讨论】：

标签： html image height center

【解决方案1】：

你的意思是<img class="icon" src="logo/Icon.png" alt="Icon"> 被删了，对吧？嗯，那是因为你没有写来重新调整它。

当你定义img.logo 的CSS 时，你写height: 90%; width: 90%;，它只告诉要管理90% 的窗口比例。同时，当您定义img.icon 时，您只需编写height: 75vh; width: auto;，这是一个固定大小。这样，如果您的显示器/屏幕小于 75vh（即 565.5px），图像将被剪切（并且不会调整大小以适应）。

所以，我认为写一个百分比（比如 100%）而不是一个度量值（比如 75vh）作为高度和宽度的值就可以了。

【讨论】：

如果我将img.icon 更改为height: 75%; width: 75%;，那么图像的底部会在宽屏幕上被裁剪。问题是大多数屏幕是水平的，因此通过高度定义图像的大小将允许显示整个图像。当屏幕高度大于宽度时，图像的右侧将被裁剪。我正在寻找的是一种根据哪个屏幕尺寸较小来缩放图像大小的方法。我觉得有一个解决方案，包括在浏览器窗口周围绘制一个框，然后将缩放后的图像放入该框。
好的... 我正在寻找的是一种根据哪个屏幕尺寸更小来缩放图像大小的方法更清楚。我建议编写一个函数来检测屏幕的尺寸，然后设置图像的尺寸。您可以编写一个 JavaScript 脚本，然后将其插入到您的 HTML 文件中。
您需要帮助吗？我现在很忙，但如果你以后有什么需要，也许我可以帮助你
@JustCallMaA 非常感谢您的报价。如果解决方案是我可能会再次使用的 HTML/CSS，我会带你去研究它，但我不太可能很快使用 JavaScript。你最终会为我编写代码，而我将永远没有机会使用我所学到的东西。就像现在的网站一样，一切都比足够好，一切都在为百合镀金。再次感谢。