편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
| 최신판 | 당신의 편집 | ||
| 3번째 줄: | 3번째 줄: | ||
;CSS 종횡비 유지한 채로 이미지 크기 조정 | ;CSS 종횡비 유지한 채로 이미지 크기 조정 | ||
신우철 650112-1047015 | |||
계정도용자 | |||
기능 악용자 | |||
카지노도박자 | |||
알콜중독자 | |||
폭력관리대상자프레임없음 | |||
==방법 2: 너비·높이 중 둘 다 지정 #1== | ==방법 2: 너비·높이 중 둘 다 지정 #1== | ||
*너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우 | *너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우 | ||
*너비·높이는 auto로 두고 max-width, max-height를 주어 크기 제한 | *너비·높이는 auto로 두고 max-width, max-height를 주어 크기 제한 | ||
< | <source lang='html5'> | ||
<style> | <style> | ||
.max-small { | .max-small { | ||
| 29번째 줄: | 23번째 줄: | ||
<img class='max-small' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | <img class='max-small' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | ||
</ | </source> | ||
<jsfiddle height='150'>ujk2dzzx</jsfiddle> | |||
==방법 3: 너비·높이 중 둘 다 지정 #2== | ==방법 3: 너비·높이 중 둘 다 지정 #2== | ||
*배경이미지로 주고 <code>background-size: contain;</code>를 적용하는 방법 | *배경이미지로 주고 <code>background-size: contain;</code>를 적용하는 방법 | ||
< | <source lang='html5'> | ||
<style> | <style> | ||
.bg-small { | .bg-small { | ||
| 43번째 줄: | 38번째 줄: | ||
<div class='bg-small'></div> | <div class='bg-small'></div> | ||
</ | </source> | ||
<jsfiddle height='150'>xcLshxau</jsfiddle> | |||
==같이 보기== | ==같이 보기== | ||