[HTML] img와 div 태그에 대한 고찰 (사이즈 범위 벗어나거나/꽉차거나)

 

 

 먼저, img 태그는 inline요소이고, div태그는 block요소이다.

 

이 글은 img태그와 div태그 사이의 관계를 정리하는 글이다.

div 태그안에 img 태그가 있다면, 크기 관계가 애매해진다. style을 활용하여, div 태그와 img 태그 사이의 관계를 정리해보겠다.

먼저, 아래는 테스트할 이미지이다.

test.png는 width와 height를 각각 100px를 가진 아래와 같은 이미지다.

 

test.png

 

1. 이미지가 div에 꽉차게 나오는 상황

div에 아무것도 주지 않을 시 (test.png는 100px의 정사각 크기) 이미지가 div에 꽉차게 된다.

    <div>
        <img src="test.png">
    </div>

 

아래와같이 img태그와 div태그의 각각 height가 같음을 알 수 있다.

(div 태그의 width는 다를 수 밖에 없다.

 

[ 결과화면 ]

결과 : 이미지 크기에 맞게 출력된다.

(참고) F12키를 이용해서, 크롬 개발자도구를 활용해서, 해당 사이즈를 확인해보았다.

 

 

 

 

2. 이미지가 튀어 나오는 상황

div에 width 50px, height 50px을 줄 시 (test.png는 100px의 정사각 크기)

    <div style="width: 50px; height: 50px;">
        <img src="test.png">
    </div>

 

[ 결과화면 ]

 

결과 : 이미지가 튀어나온다. 본래 div 크기에 넘어서 이미지가 출력된다.

 

3. 이미지가 div에 맞게 출력되는 상황 (비율 깨짐)

- div에 width 50px, height 80px에서, img에 width: 100%; height: 100%를 줄 시

    <div style="width: 50px; height: 80px;">
        <img src="test.png" style="width: 100%; height: 100%;">
    </div>

 

[ 결과화면 ]

 

결과 : 비율이 망가진 채료 해당 div 크기에 딱 맞게 출력되는 것을 볼 수 있다.

 

4.  이미지가 div에 잘라 져서 출력되는 상황 (비율 안 깨짐)

- object-fit:cover; 를 사용해야한다.

    <div style="width: 50px; height: 80px;">
        <img src="test.png" style="width: 100%; height: 100%; object-fit:cover;">
    </div>

 

[ 결과화면 ]

 

 

HTML block 요소

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video,

 

 

HTML inline 요소

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, <span>, strong, sub, sup, textarea, tt, var,

 

 

 

참고자료

https://velog.io/@wldus9503/TIL-06.-img-%ED%83%9C%EA%B7%B8-VS-div-%ED%83%9C%EA%B7%B8%EC%97%90-background-image

TIL -06. <img> 태그 VS <div> 태그에 background-image