如何解决如何缩放和居中图像并使图像之间的空间成比例
首先,我道歉;我是设计师,不是编码员。我必须创建一个网页来与客户共享徽标。我通过反复试验写的东西要好得多,但现在我想尝试做得更好。
该网页仅包含四个图像。我希望最上面的图像居中并缩放以适合查看器的浏览器窗口。我已经看过示例代码,但我无法使用其中的任何代码。 [此外:在我尝试的十二个样本中,没有一个样本彼此相似。让我惊讶的是,有太多的方法可以做同样的事情,但我仍然无法弄清楚。]
如果该解决方案可以解决我在页面上遇到的一个小问题,那就太好了:顶部图像的高度缩放到窗口高度的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)作为高度和宽度的值即可。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。