푸터 섹션에 로고 추가

개발
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열로 나누어 각 열에 두 개의 이미지를 배치하도록 변경할 수 있습니다.