[반응형] 이미지 제작: 가로폭 100% 이미지 만들기

반응형 이미지 제작: 가로폭 100% 이미지 만들기

 

반응형 이미지 제작시 참고사항

 

 

반응형의 경우 가로쪽 스크롤이 생기면 안된다.

 

max-width: 1200px;  를 주어 가로 사이즈의 최대값 ( max-width )을 부여해준다. 

가로 100%의 이미지를 만든다. 

 

    max-width: 1200px;
    width: 100%;

 

.img_wrap {
/*    width: 1200px;*/
    max-width: 1200px;
    width: 100%;
    background: #f00;
    margin: 0 auto;
}

 

 

---

 

 

 

백그라운드 에 이미지를 넣어서 만드는 방법

 

가로폭은 max-wdith 로 길이를 지정해주고 

높이는 상대적  % 비율로 만들어 넣어준다. 

높이(height )는 padding-bottom 으로 넣어준다.

 

높이 계산 : 세로폭 / 가로폭    360 / 720  

세로폭을 가로폭으로 나눈다. 퍼센트 만들기 위해   100  곱해준다. 

 

ex) 360 / 720 픽셀  *100 =>  50% 가 된다.

 

.bgbox {
    max-width: 1200px;
    padding-bottom: 50%;
    margin: 0 auto;
    background-image: url(https://t4.ftcdn.net/jpg/04/81/41/97/360_F_481419706_suiSEIertY741Z6rEy3Lj2pv6zzSNKZu.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
}