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

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>

|

댓글 1개

대단하십니다. 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
HTML 3년 전 조회 1,464
기타 3년 전 조회 1,134
CSS 3년 전 조회 1,345
기타 3년 전 조회 2,498
CSS 3년 전 조회 2,192
CSS 3년 전 조회 2,203
반응형 3년 전 조회 1,472
반응형 3년 전 조회 4,556
웹접근성 3년 전 조회 1,978
반응형 3년 전 조회 2,284
CSS 3년 전 조회 1,772
HTML 3년 전 조회 1,916
HTML 3년 전 조회 1,613
CSS 3년 전 조회 1,633
CSS 3년 전 조회 1,931
CSS 3년 전 조회 2,324
CSS 4년 전 조회 1,898
기타 4년 전 조회 2,774
반응형 4년 전 조회 3,381
웹접근성 4년 전 조회 2,766
CSS 4년 전 조회 5,245
기타 4년 전 조회 8,958
CSS 4년 전 조회 3,505
웹접근성 5년 전 조회 3,928
CSS 5년 전 조회 4,436
기타 5년 전 조회 3,582
CSS 5년 전 조회 3,865
기타 5년 전 조회 3,392
기타 5년 전 조회 3,145
CSS 6년 전 조회 4,001