이미지 비율대로 리사이징 하기 > 퍼블리셔팁

퍼블리셔팁

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

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

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>

추천
2

댓글 0개

전체 1,230
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT