Html 如何正确缩放网页上的图形
第一次在这里提问，我感谢你的帮助和/或建议 我试图使页面上的多个图形在更改浏览器视口宽度时以某种方式调整大小。要解释我想要什么有点困难，所以我会尽力的。如果您查看我的示例页面，您可以看到我已将其设置为，使由黑色矩形组成的图形在使视口变窄时缩小，在使视口变宽时放大，这正是我想要的 问题是图形似乎并不完全起作用。我希望他们表现得像是有联系的。例如，如果要缩小视口，它们应该从右下角到左上角都变小，并随着视口变小而移动到左上角。相反，图像的顶部保持在同一位置，如果视口变窄，它们会相距太远，如果视口变宽，它们会重叠 想象一下，如果你在Photoshop中自己的图层上有各种各样的对象，你可以通过将右下角拖动到左上角来变换这些图层，使它们变小。你会看到所有的层都像链接在一起一样工作，即使你将这些对象定位在某些地方，它们也会相应地移动，而不是像我的页面上发生的那样固定在当前位置。你在Photoshop中是如何做到这一点的，这就是我希望图形在我的页面上的表现 我猜问题在于我使用像素值的绝对定位来定义它们距离顶部的距离，因此浏览器遵守这些规则，但我不知道如何实现我想要的。我尝试使用相对定位，我尝试使用边距设置而不是位置设置，我尝试了我在网上看到的各种其他想法，但我就是想不出来 请让我知道如何实现我想要的，并请问我任何你需要回答的问题。多谢各位 以下是指向我的示例页面的链接：Html 如何正确缩放网页上的图形,html,css,Html,Css,第一次在这里提问，我感谢你的帮助和/或建议 我试图使页面上的多个图形在更改浏览器视口宽度时以某种方式调整大小。要解释我想要什么有点困难，所以我会尽力的。如果您查看我的示例页面，您可以看到我已将其设置为，使由黑色矩形组成的图形在使视口变窄时缩小，在使视口变宽时放大，这正是我想要的 问题是图形似乎并不完全起作用。我希望他们表现得像是有联系的。例如，如果要缩小视口，它们应该从右下角到左上角都变小，并随着视口变小而移动到左上角。相反，图像的顶部保持在同一位置，如果视口变窄，它们会相距太远，如果视口变宽，
http://www.marifysworld.com
正文{
边际：0px；
填充：0px；
背景色：#ffffff}
img{
显示：块；
边际：0px；
填充：0px}
.a{
宽度：21.65%；
高度：自动；
位置：绝对位置；
左：0%；
顶部：175px}
.b{
宽度：35.2%；
高度：自动；
位置：绝对位置；
左：32.4%；
顶部：41px}
c{
宽度：21.15%；
高度：自动；
位置：绝对位置；
右：0%；
顶部：0px}
博士{
宽度：26.6%；
高度：自动；
位置：绝对位置；
左：0%；
顶部：733px}
e{
宽度：22.6%；
高度：自动；
位置：绝对位置；
右：0%；
顶部：599px}
f{
宽度：16.05%；
高度：自动；
位置：绝对位置；
左：44.6%；
顶部：927px}如果我理解正确，您需要图像的包装：
<div style="position: relative;width: 10%;">
<img class="a" src="http://www.marifysworld.com/images/content/regular/a.jpg" alt="block">
<img class="b" src="http://www.marifysworld.com/images/content/regular/b.jpg" alt="block">
<img class="c" src="http://www.marifysworld.com/images/content/regular/c.jpg" alt="block">
<img class="d" src="http://www.marifysworld.com/images/content/regular/d.jpg" alt="block">
<img class="e" src="http://www.marifysworld.com/images/content/regular/e.jpg" alt="block">
<img class="f" src="http://www.marifysworld.com/images/content/regular/f.jpg" alt="block">
</div>
在您的示例中，图像对于主体标记是绝对的，但是如果您在它们周围做一个包装，它们将绝对定位到包装上，您可以调整包装的大小，使所有图像一次变小。如果我们知道屏幕的高度，布局看起来很好，然后，我们可以根据实际使用的屏幕高度缩放所有位置顶部值 注意：这可能是我们想要的，也可能不是。可能与屏幕宽度相关的计算给出了所需的结果。从问题中给出的内容不可能知道 此代码段使用CSS变量，-d，我们将其定义为“良好”屏幕的高度（或宽度，如果首选），然后使用CSS calc相对于该高度进行计算。如果宽度更合适，则按照注释中所示更改代码段
正文{
边际：0px；
填充：0px；
背景色：#ffffff；
位置：相对位置；
/*增加*/
--d:600；/*输入屏幕的高度（或宽度），使页面看起来很好（在CSS px中，但没有px）*/
--使用：100vh；/*如果您想使用好屏幕的宽度而不是高度，请在此处输入100vw*/
}
img{
位置：相对位置；
显示：块；
边际：0px；
填充：0px；
顶部：计算（（var（--top）/var（--d）*var（--use））；
}
.a{
宽度：21.65%；
高度：自动；
位置：绝对位置；
左：0%；
--顶部：175；}
.b{
宽度：35.2%；
高度：自动；
位置：绝对位置；
左：32.4%；
--顶部：41；}
c{
宽度：21.15%；
高度：自动；
位置：绝对位置；
右：0%；
--顶部：0；}
博士{
宽度：26.6%；
高度：自动；
位置：绝对位置；
左：0%；
--顶部：733；}
e{
宽度：22.6%；
高度：自动；
位置：绝对位置；
右：0%；
--顶部：599；}
f{
宽度：16.05%；
高度：自动；
位置：绝对位置；
左：44.6%；
--顶部：927；}