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

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,459
기타 3년 전 조회 1,129
CSS 3년 전 조회 1,340
기타 3년 전 조회 2,488
CSS 3년 전 조회 2,184
CSS 3년 전 조회 2,196
반응형 3년 전 조회 1,468
반응형 3년 전 조회 4,548
웹접근성 3년 전 조회 1,971
반응형 3년 전 조회 2,280
CSS 3년 전 조회 1,770
HTML 3년 전 조회 1,912
HTML 3년 전 조회 1,609
CSS 3년 전 조회 1,625
CSS 3년 전 조회 1,927
CSS 3년 전 조회 2,316
CSS 4년 전 조회 1,895
기타 4년 전 조회 2,772
반응형 4년 전 조회 3,380
웹접근성 4년 전 조회 2,764
CSS 4년 전 조회 5,236
기타 4년 전 조회 8,949
CSS 4년 전 조회 3,502
웹접근성 5년 전 조회 3,927
CSS 5년 전 조회 4,433
기타 5년 전 조회 3,575
CSS 5년 전 조회 3,864
기타 5년 전 조회 3,391
기타 5년 전 조회 3,142
CSS 6년 전 조회 4,000