[SH FILM/CSS] 이미지 크기 자동 조절

이미지 크기 머선일이구 ...

 

저렇게 웹페이지 화면을 꽉 채우는 것으로 모자라서

도대체 어떤 사진인지 감이 안 올 정도일 때는

브라우저 창에 맞게 이미지 조절해야 한다.

 

브라우저 창이 작으면 width와 height가 자동으로 조절되게끔 하고,

브라우저 창이 커져도 사진이 그 브라우저 창에 맞춰가는 코드를 알아보겠다.

---

1. display : block

display를 block값으로 설정해줘야 함.

 

2. max-widht : 100%

브라우저 창의 최대 크기에 사진의 width를 100%로 크기를 조절하게끔 코드를 넣어준다.

height도 auto로 맞춰주자.

 

위 두 코드를 이미지 class에 넣어주면 완성 ~!

 

서브 글자와 이미지 간의 간격이 좀 있으면 좋겠어서 margin-top을 30px을 추가로 지정했고

사진의 모서리가 곡선 형태로 완만하게 되었으면 해서 border-radius를 25px로 지정했다.

.film_img{
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 30px;
    border-radius: 25px;
}

쫘좐