时间戳

首页 > 解决方案 > 如何使用相对定位的子图像调整图像的大小？

html - 如何使用相对定位的子图像调整图像的大小？

问题描述

我正在尝试创建锦标赛图。
这是空白图。 空白图

我要做的是将来自不同团队的徽标插入蓝点。我所做的是创建一个包含图表的 div，然后插入与图片相对位置的徽标。

<html>
<style>
    .head{
        position: relative;
        left: 10px;
        bottom: 90px;
    }
</style>
<body>
<div>
    <img src="diagram.png">
    <img src="logo.png" class="head">
</div>
</body>
</html>

然后第一个徽标将出现在第一个位置。

当我用屏幕调整图表的大小时，我不知道如何以相同的方式调整徽标的大小，以便它们保持在同一个位置并具有正确的比例。因为我想在每个屏幕上都适合图表，所以我想调整整个东西的大小，使其适合每个屏幕。我不关心手机。
有没有办法一次调整整个东西的大小？

标签： htmlcss

解决方案

向我们提供更多代码和您遇到的明确问题。如果您有任何其他问题，请随时在评论中提问。

您现在正在做的是将每个徽标硬编码到其位置，这就是为什么当您调整浏览器窗口大小时它不适合您想要的位置。

我建议你阅读 flex-box 文档，这里有一个很好的教程：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读