틈

이미지를 넣다보면, 화면에 가득차게 하고 싶을 때가 많다. 그럴때는 주로 background를 이용해서 이미지를 넣고, background-size:cover를 적용했다. 하지만, 의미있는 이미지의 경우, 접근성을 고려해서 노출하는 게 맞기도 하고, background 속성으로 지정하는 게 가끔은 귀찮기도 했다. 그럴때 사용하면 좋을 css! 왼쪽의 이미지처럼 높이가 큰 이미지를, 왼쪽처럼 정사각형 안에 가득차게 설정했다. img { width:200px; height:200px; object-fit:cover; } img에 높이, 너비를 설정하고 object-fit:cover 속성을 추가하면 overflow 적용한 듯한 효과를 볼 수 있다. object-fit에는 fill, contain, cover ..