img 태그가 가로 세로 비율을 유지한채로 반응형 웹사이트를 제작 한다고 하면 어떻게 해야 할까요?
당연히 반응형 웹사이트 제작이니깐 img 태그에 고정 픽셀을 적용 하면 안되겠죠?
img{
width : 400px;
height: 300px;
}이런식으로 고정 픽셀을 적용 하면 브라우저가 줄거나 늘때 이미지의 크기는 고정되어 있습니다.
그렇다면, 우리가 원하는 형태는
1. 이미지의 가로/세로 비율 유지
2. 이미지 바로 상위 노드의 크기에 따라서 이미지의 크기 변경
이것이 우리가 원하는 목표 입니다.
1. 이미지의 가로/세로 비율 유지
브라우저는 사실 이미지의 비율을 알고 있습니다. 따라서 우리는 width 나 height 둘중 하나의 크기만 알려주면 그 값을 기준으로 나머지 하나의 크기도 계산하여 렌더링을 합니다.
<html>
<head>
<style>
img{
width: 400px;
}
</style>
</head>
<body>
<img src="sample2.jpg" alt="">
</body>
</html>
<html>
<head>
<style>
img{
height:266.66px;
}
</style>
</head>
<body>
<img src="sample2.jpg" alt="">
</body>
</html>
위의 두 html 코드 모두 같은 크기의 이미지가 출력 된것을 볼수 있습니다. width, height의 기본값은 auto 입니다. 따로 설정을 해주지 않으면 auto인 경우에 브라우저가 가로/세로 비율을 계산 하여 렌더링을 합니다.
2. 이미지 바로 상위 노드의 크기에 따라서 이미지의 크기 변경
이미지가 크기가 반응형이 되기 위해서는 크기는 고정 픽셀이면 안됩니다. '%'로 되어 있어야 바로 상위 노드의 크기를 상속받아 크기가 변경 됩니다. img 태그의 폭이 100% 라면 바로 상위의 폭의 맞추고 height 는 auto(기본값) 으로 주어 이미지의 비율을 유지 시킵니다.
<html>
<head>
<style>
figure{
width: 400px;
}
figure img{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<figure>
<img src="sample2.jpg" alt="">
</figure>
</body>
</html>
만약 반응형에 의해서 부모크기가 변경 되면서 이미지의 크기가 400px 보다 커지지 않길 원한다면 max-width: 400px을 추가 해주시면 됩니다.
<html>
<head>
<style>
figure{
width: 500px;
}
figure img{
width: 100%;
max-width: 400px;
height: auto;
}
</style>
</head>
<body>
<figure>
<img src="sample2.jpg" alt="">
</figure>
</body>
</html>
img 태그의 상위 노드로 figure 태그를 사용했습니다. figure 태그는 img 태그의 설명을 달아주는 figcaption 태그를 묶어주는 시맨틱 태그 입니다. figure 태그의 대해서 궁금 하다면 이곳을 읽어 주세요.
https://coding-food-court.tistory.com/22
figure figcaption 태그
1. 시맨틱 태그 시맨틱 태그는 사용자가 아닌 브라우저와 개발자에게 그 태그의 의미를 전달 하는 것 입니다. 시맨틱 태그 중
'Publishing' 카테고리의 다른 글
| WebStorage API (0) | 2020.05.13 |
|---|---|
| import html (0) | 2020.05.11 |
| display flex 4 flex-grow flex-shrink (0) | 2020.05.08 |
| display flex 3 justify-content (0) | 2020.05.07 |
| display flex2 flex-wrap (0) | 2020.05.07 |