반응 형으로 정사각형을 만드는 것은 어렵습니다.

소개

어느 날, 반응형으로 정사각형을 만들고, 한층 더 그 중앙에 SVG의 아이콘이 있는 스타일의 실장을 했을 때에 어렵게 느꼈기 때문에 기사로 했습니다.

소스 코드

HTML

index.html

<body>
    <div class="container">
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
        <div class="box">
            <img src="./icon.svg" class="icon">
        </div>
    </div>
</body>

CSS

styles.css

.container {
    display: flex;
    flex-wrap: wrap;
}

.box {
    padding-bottom: calc(100% / 3);
    width: calc(100% / 3);
    height: 0;
    position: relative;
}

.icon {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

화면

이해하기 쉽도록 배경색을 붙였습니다.

마지막으로

반응형으로 사각형을 유지하면서 내부 SVG 아이콘의 크기도 유지하기가 어려웠습니다.
여러분도 좋은 정사각형 라이프를!

끝

Reference

이 문제에 관하여(반응 형으로 정사각형을 만드는 것은 어렵습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tsukiyama3/items/523e3047d8e3ff66bc27

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다