종횡비(aspect ratio)는 가로 길이와 세로 길이의 비율이다. 4:3 이미지라면 가로가 네 몫일 때 세로가 세 몫이며, 픽셀 수가 달라도 같은 비율일 수 있다.
1200×900과400×300은 모두4:3이다. 비율이 같다는 사실만으로 세부를 보여줄 수 있는 정도까지 같아지지는 않는다.- 비율을 유지하는
4:3이미지는 가로를 400에서 800으로 키우면 세로도 300에서 600으로 커진다. 옆의 글은 폭이 넓어지면서 줄 수가 줄어들 수 있다. 반응형 디자인에서 둘의 높이가 어긋나는 까닭이다. - CSS의
aspect-ratio: 4 / 3은 상자의 선호 비율을 정한다. 너비나 높이 중 적어도 하나가 자동으로 계산돼야 크기 계산에 반영되며, 두 값을 모두 고정하면 이 비율로 강제 변경되지 않는다. (MDN: aspect-ratio) - 원본과 표시 상자의 비율이 다르면
object-fit: contain은 전체를 넣으며 빈 공간을 남길 수 있고,cover는 상자를 채우며 일부를 잘라낼 수 있다. (MDN: object-fit) - 화면에 따라 달라지는 이미지의 구도에서는 비율과 함께 무엇이 잘리는지 살핀다. 같은 크기의 다른 작품을 같은 상자에 넣더라도 작품 전체를 보여주는 조건은 달라질 수 있다.