이미지 비율 맞추기
텍스트는 일반적으로 바뀐 폭에 맞추어 자동으로 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다.
이미지 크기를 정하지 않은 경우
- 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다.
<div>
<img src="https://bit.ly/2I4rvsj" alt="">
</div>
div {
width: 300px;
border: 2px solid orange;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
- 이를 해결하는 방법은 max-width 속성을 부여하는 것입니다.
- 가로 세로 비율에 맞게 크기가 줄어듭니다.
img {
max-width: 100%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
이미지 크기를 속성으로 이미 설정한 경우
- 이미지 크기가 속성으로 이미 설정되어 있으면 max-width 속성을 추가했을 때 가로폭은 줄어들지만 높이는 줄어들지 않고 가로 세로 비율이 맞지 않는 문제가 발생합니다.
<div>
<img src="//bit.ly/2I4rvsj" alt="" width="540" height="360">
</div>
div {
width: 300px;
border: 2px solid orange;
}
img {
max-width: 100%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
- 이를 해결하는 방법은 height 속성값을 auto로 지정해주는 것입니다.
- 원본 비율에 맞게 높이가 조정됩니다.
img {
max-width: 100%;
height: auto;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
이미지 크기를 inline style로 정한 경우
- 이미지 크기를 inline style로 정하는 경우가 있습니다.
- 예를 들어 다음처럼 크기를 정하는 것입니다.
<img src="//bit.ly/2I4rvsj" alt="" style="width: 540px; height: 360px;">
- 가로폭은 조정되나 높이가 변하지 않아 비율이 맞지 않게 됩니다.
- 이런 경우 height 속성 값에 !important를 추가합니다.
img {
max-width: 100%;
height: auto !important;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.