css - 반응형 페이지에 이미지를 정사각형으로 표시

 

HTML

<div class="wrap">
    <img class="inner" src="이미지주소">
</div>

 

CSS

.wrap {
    position: relative;
    width: 50%;
    overflow: hidden; /* 이미지 넘치는 부분을 자를 경우 */
}

.wrap:after {
    content: "";
    padding-bottom: 100%;
}

.inner {
    position: absolute;
    width: 100%;
    height: auto; /* 가로세로 비율 유지, 넘치는 세로 부분은 자를 경우 : 100% 로 하면 뭉개짐*/
}