[CSS] 반응형 웹 이론 - 이미지 처리

만약 붉은색 박스 라인안에 이미지를 맞추어 넣기위해서는 어떻게 하면 될까?

 

이럴 경우에는  img 태그에 몇가지 코드를 작성해주면 된다.

 

 

div{

    /* 가로크기 */

    width: 200px;

    /* 외곽선 */

    border: 2px solid red;

}

 

img{

   

    max-width: 100%;

    height: auto;

}

먼저 max-width의 의미는 부모요소(붉은색 박스 크기)를 벗어나지 않게 조정하는 속성 태그이고,

height: auto; 의 의미는 자식요소(사진)에 맞추어 자동 조절해주는 속성 태그이다.

 

위의 코드를 적용하면 결과는 다음과 같다.