フッターセクションにロゴを追加する

開発
30

ミケーレ様

以下のコードをお試しいただけますでしょうか。

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%;
        }
    }
}

デスクトップでの表示：

image
image2498×1369 241 KB

モバイルでの表示：

image
image393×851 51.2 KB

いかがでしょうか。
モバイルレイアウトは、モバイルで画像が小さすぎる場合に、2列×2枚の画像に変更することも可能です。