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

问题描述

首先，我道歉；我是设计师，不是编码员。我必须创建一个网页来与客户共享徽标。我通过反复试验写的东西要好得多，但现在我想尝试做得更好。

该网页仅包含四个图像。我希望最上面的图像居中并缩放以适合查看器的浏览器窗口。我已经看过示例代码，但我无法使用其中的任何代码。 [此外：在我尝试的十二个样本中，没有一个样本彼此相似。让我惊讶的是，有太多的方法可以做同样的事情，但我仍然无法弄清楚。]

如果该解决方案可以解决我在页面上遇到的一个小问题，那就太好了：顶部图像的高度缩放到窗口高度的75％（水平适合时间的95％），但是在查看时在狭窄的高大屏幕（例如电话）上，图像的右侧被切除。是否可以根据窗口的高度或宽度较小来缩放？

最后，我想在图像之间留出空间，现在我可以通过填充来实现。但是，这意味着不管图像的大小与窗口的宽度成比例地缩放，它都是固定的50px。是否可以将填充物设置为图像高度的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>

解决方法

您的意思是<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.5像素），则图像将被剪切（并且无法调整大小以适合显示）。

因此，我认为写一个百分比（例如100％）而不是度量（例如75vh）作为高度和宽度的值即可。

center height html image image