이미지 비율대로 리사이징 하기

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>