이미지 위젯 크기 조절하는 법

아임웹에서 같은 비율의 이미지를 1열로 나열하는 경우, 아래 그림처럼 깔끔하게 그리드 구성으로 표현됩니다.

1열로 이미지를 나열하려면, 이미지 크기는 다르더라도 가능한 이미지 비율은 맞춰줘야 합니다.


4:3 비율 | 1920x1280픽셀 | JPG

4:3 비율 | 1920x1280픽셀 | JPG

4:3 비율 | 1920x1280픽셀 | JPG

이미지 비율이 다른 경우

위처럼 똑같이 나열해도 이미지 비율이 다른 경우, 아래 그림처럼 마지막 이미지가 다르게 나타납니다.


4:3 비율 | 1920x1280픽셀

4:3 비율 | 1920x1280픽셀

3:4 비율 | 1280x1920픽셀

이미지 위젯 크기는 기본적으로 '높이'로 조절

이미지는 이미지의 높이(px)에 따라, 가로 길이도 비율에 맞춰 변형됩니다.
가로가 긴 4:3 비율 사진의 경우, 높이를 늘리면 좌우 폭도 함께 늘어납니다.
그러다 이미지가 이미지 표시 영역을 넘어가는 순간 좌우 폭이 잘리는 걸 확인하실 수 있습니다.

4:3 비율 | 높이 180픽셀(px)

좌측 이미지는 높이가 줄어든 만큼, 가로 길이도 따라서 줄었습니다. 따라서 전체 이미지 크기가 줄어듭니다.

4:3 비율 | 높이 265픽셀(px)

이미지 위젯 삽입 시 기본값으로 입력된 높이(px)에 따라 이미지가 양호하게 표현되었습니다.

4:3 비율 | 높이 360픽셀(px)

우측 사진은 높이가 늘어난 만큼, 가로 길이도 늘었습니다. 그러나 이미지를 표시하는 영역이 한정되어 있기 때문에, 가로 양측이 잘리는 것을 확인할 수 있습니다.

이미지 채우기

'이미지 채우기'를 체크하면 각 이미지들이, 이미지 표시 영역 내에서 크기가 조절됩니다.

아래 오른쪽 이미지는 높이가 길기 때문에, 이미지 위아래가 표시 영역 바깥으로 넘어갔습니다. 따라서 위아래가 잘려보이는 것입니다.


4:3 비율 | 1920x1280픽셀

4:3 비율 | 1920x1280픽셀

3:4 비율 | 1280x1920픽셀

같은 비율의 이미지를 사용

반응형 사이트를 제작할 때 이미지는 가능한 같은 비율의 이미지를 사용하는 것이 만들기 편하고 좋습니다.

3:4 비율 | 높이 600픽셀(px)

3:4 비율 | 높이 600픽셀(px)

3:4 비율 | 높이 600픽셀(px)

상단이동