img 태그, 비율이 유지되는 이미지, 찌그러지는 이미지, object-fit:cover;

img 태그 

웹 페이지에  이미지는 어떻게 넣을수 있을까?

글 같은 경우에는 div 를 사용하면 쉽게 글을 보여줄수있지만 div에 그림을 넣는다고 해서 그림이 보이지는 않는다

그래서 그림을 넣을수 있는 태그가 따로 존재한다. 바로 img 태그이다. 

이 태그는 다른 태그와는 다르게 닫는 태그가 존재하지 않는다.

<img src="" alt=""> 이런 형식이다. 

src 에  이미지 주소를 복사해서 넣으면된다.

그럼 이렇게 그림이 뜬다.!

 

 

비율이 유지되는 이미지

 

근데 이제 그림이 너무 클때가 있어서 크기를 줄이고 싶다. 

그러기 위해서 다른 태그들 처럼 너비와 높이를 줄이면 된다. 

한가지 차이점은  img 은  너비 나 높이 하나만을 바꿔줘도 비율대로 다른 설정하지않은 너비와 높이 값이 알아서 바뀌어진다.

바로 이렇게 너비만 설정해줬는데 높이도 줄어드는걸 알수있다. 

 

찌그러지는 이미지

그렇다면 너비와 높이를 둘다 설정하면 어떻게 될까?

이렇게 이미지가 찌그러진다.

 

object-fit : cover; 

이문제를 해결하기 위해서 object-fit : cover; 이라는 css 속성도 있다.

그러면 이렇게 늘려준 상태로  이미지를 보여준다.! 

끝!