이미지 비율대로 리사이징 하기 정보
CSS 이미지 비율대로 리사이징 하기
본문
http://www.mediaplayer.kr/main/bbs/html_editor.php
위 링크에서 직접 확인해 보세요.
예제는 가로 720px 세로 405px 이미지입니다.
----------
1. 이미지
<style>
img { object-fit:cover; }
</style>
<img src=https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg>
<br>
<img style=width:250px;height:250px src=https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg>
<br>
<img style=width:300px;height:600px src=https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg>
<br>
<img style=width:900px;height:200px src=https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg>
----------
2. 배경
<style>
div { background-size:cover; background-position:50%; }
</style>
<div style=width:720px;height:405px;background-image:url(https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg)></div>
<br>
<div style=width:250px;height:250px;background-image:url(https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg)></div>
<br>
<div style=width:300px;height:600px;background-image:url(https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg)></div>
<br>
<div style=width:900px;height:200px;background-image:url(https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg)></div>
4