일반적으로 background-image 속성을 사용했을 때 사용하는 큰 이유는 background-size:cover
속성 때문인데..
이를 해결하기 위해서 object-fit
으로 해결하실 수 있습니다.
이럴 때, picture를 사용하면 background-size:cover와 동일한 효과가 생깁니다.
그리고 또한 다른 부수효과를 얻을 수 있는데요.
- SEO 친화적 이미지
- 접근성 친화적 이미지(alt="" 속성 사용)
- CMS-generated 이미지, CDN과 함께 잘 동작함
- 이미지 최적화를 위한 srcset과 함께 잘 작동
- .webp같은 next-generation 이미지 포맷을 위해 태그를 사용하여 활용할 수도 있습니다.
<picture>
<img src="..." alt="..." style="object-fit:cover" loading="lazy" />
</picture>
이렇게 하고나면 또 Chrome이나 다른 브라우저의 이미지 로드 기능과 같은 장점도 얻을 수 있습니다.
이런 이미지들은 또한, Image Optimize 같은 도구를 통해 CMS에서 크기가 자동으로 조정될 수도 있습니다.
object-fit 속성을 사용하면 css를 사용하여 이미지 크롭핑 효과도 얻을 수 있습니다.
'HTML' 카테고리의 다른 글
닫기 이벤트 버튼에 대하여.. button vs a (0) | 2020.05.31 |
---|---|
<blockquote>, <q>, <cite> 올바르게 사용하기 (0) | 2020.03.15 |
[HTML] 자동으로 생성되는 autocomplete 해제하기 (0) | 2019.01.27 |
[META] 모바일 자동 전화걸기 방지 (0) | 2018.05.28 |
[META] IOS11의 viewport-fit=cover 속성 (2) | 2018.05.17 |
댓글