在页脚部分添加Logo

[Lilly]

我稍微更新了一下帖子。再试一次。你将不得不调整图片大小以达到你想要的效果。我不知道你想要什么尺寸，对我来说使用 300 尺寸都可以。图片大小将取决于个人喜好。

[Michele_Butturini]

我离解决方案很近了……这是 Chrome 的错……

显然，在 Safari 中看起来很完美——感谢您的帮助

现在的问题是：为什么 Chrome 会这样做？

[Lilly]

我在 Windows Chrome 或 iOS Safari 中都没有遇到任何问题。我同时使用了这两个工具来截屏和发帖。试试我发布的更新后的代码，它可能会解决问题。

[Michele_Butturini]

@Lilly

<div class="footer_align">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width="300">
    </a>
    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width="300">
    </a>
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width="300">
    </a>
</div>

同样的问题……

[Lilly]

哪个问题？是 Chrome 尺寸问题吗？

[Michele_Butturini]

抱歉，我之前没有说清楚；问题是当我使用我的主浏览器（Chrome）时，我看不到页脚的徽标。当我使用 Safari 时，我可以看到页脚的徽标。我也尝试在我女朋友的 MacBook 上使用 Chrome，对她来说运行得很好；我们可以看到页脚的徽标。所以我的 Chrome 可能有什么奇怪的问题；我不知道是什么原因。

我还注意到手机上的格式没有正确缩放 - 你知道如何修复它吗？

[Lilly]

您是希望图片随着屏幕大小收缩和扩展吗？ 您也可以为移动视图制作一个不同的页脚，或者只将页脚放在桌面视图中。 您会注意到在编辑 HTML/CSS 屏幕中有用于桌面和移动视图的部分，其中包含与通用部分相同的选项卡。

您可能需要尝试调整图片大小的 HTML。您可能希望使用百分比的相对大小，但图片大小各不相同，因此除非您使用相同大小的图片，否则会很困难。我不太清楚您想要什么。

[Lilly]

有人比我聪明得多的人建议，也许您应该在浏览器的隐身模式下检查一下，以排除任何扩展程序导致的问题。

我建议您将图像调整为相似的尺寸，然后使用不同的桌面和移动视图 CSS 以及 FOOTER 部分来获得您想要的效果。

[Michele_Butturini]

是的，抱歉我没有说清楚，我希望它们能随着窗口大小缩放，无论是桌面端还是移动端。

（使用隐身模式是个绝妙的主意 :)）

[Canapin (Coin-coin le Canapin)]

你好 Michele，

你能试试下面的代码吗？

HTML（我删除了图片的 width 属性，并为容器添加了一个 wrap 类）：

<div class="wrap custom-footer-image">
    <a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
    <a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
    <a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>

CSS：

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    a {
    flex: 1;
    text-align: center;
        img {
            max-width: 100%;
        }
    }
}

桌面显示效果：

移动端显示效果：

你觉得怎么样？
移动端的布局可以改为两列两图，如果图片在移动端太小的话。

[Michele_Butturini]

它运行完美，感谢大家的大力支持！