24/07/01 Study Project 1(feat. HERA)

다음 스터디 전까지 스터디 과제를 완성해야 하는데

어제 스터디 때 딱 pc용 화면 구현하고 끝내서 오늘부터는 반응형을 구현해야 한다.

쉽지 않은 반응형.... 진짜 나는 항상 반응형을 제일 어려워했다.

ㅠㅡㅠ

 

반응형을 구현하다가 이미지가 자꾸 원래 큰 창에서 지정한 크기에 고정되어 있길래 머리가 아파서 구글링을 하기 시작했다.

그렇게 알게 된 코드가 있는데...

object-fit: ;이다.

이거 이용해서 이미지 비율을 맞추면서 반응형 페이지를 구현할 수 있다!

 

방법은 html에 <img> 태그 걸 때

style="width:100%; height:100%; object-fit:contain;" 걸어 주면 된다.

 

구글링하다 완전 정리 잘해두신 블로그를 찾았는데

w3schools에서 배운 거 정리해두셨던데

난 사실 이분이 정리하신 게 더 이해 잘 되어서 이분 링크를 건다..

https://blog.naver.com/jsy930609/222089319060

css 이미지 비율 맞추기 유지면서 줄이기 반응형 object-fit 오브젝트 채우기

혹시 몰라서 w3wchoos 링크도 건다

 

https://www.w3schools.com/css/css3_object-fit.asp

W3Schools.com

 

 

• 스터디 결과물

또 동영상 재생 안되는 이슈로

링크 건다..

https://blog.naver.com/unong_story/223496892746