CSS 이미지 크기, 채우는 방법, 늘리지 않는 방법?
이미지가 있는데 특정 너비와 높이를 픽셀 단위로 설정하고 싶습니다
그러나 css ( width:150px; height:100px)를 사용하여 너비와 높이를 설정하면 이미지가 늘어나고보기 흉할 수 있습니다.
방법 기입 CSS를 사용하여 특정 크기로 이미지를, 그리고 스트레칭하지 그것을?
채우기 및 스트레칭 이미지의 예 :
원본 이미지 :
기지개 된 이미지 :
채워진 이미지 :
제발 상기 채워진 이미지 예에 유의 : 첫째, 화상 150x255 (유지 종횡비)로 조정되고, 그 후, 그 자른 150x100한다.
이미지를 CSS 배경으로 사용하려면 우아한 솔루션이 있습니다. 간단하게 사용 cover하거나 contain에서 background-sizeCSS3 속성입니다.
<div class="container"></div>
.container {
width: 150px;
height: 100px;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
하지만 cover당신에게 스케일 업 이미지를 제공합니다 contain당신에게 축소 이미지를 줄 것이다. 둘 다 픽셀 종횡비를 유지합니다.
http://jsfiddle.net/uTHqs/ (표지 사용)
http://jsfiddle.net/HZ2FT/ (포함 사용)
이 방법은 Thomas Fuchs의 빠른 가이드에 따라 Retina 디스플레이에 친숙하다는 장점이 있습니다.
두 속성 모두에 대한 브라우저 지원은 IE6-8을 제외 한다는 점을 언급 할 가치가 있습니다.
css 속성을 사용할 수 있습니다 object-fit.
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
IE에 대한 polyfill이 있습니다 : https://github.com/anselmh/object-fit
유일한 실제 방법은 이미지 주위에 컨테이너를 가지고 사용하는 것입니다 overflow:hidden.
HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
CSS에서 원하는 것을하고 이미지를 중앙에 배치하는 것은 고통 스럽습니다 .jquery에는 다음과 같은 빠른 수정이 있습니다.
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
이 질문에 가장 많이 찬성 된 답변을 개선했습니다 ( 허용 된 질문이 아님 ). 부트 스트랩을
사용하는 경우
세 가지 차이점이 있습니다.
width:100%스타일을 제공 합니다. 부트 스트랩
을 사용 하고 이미지를 사용 가능한 모든 너비로 늘리려 는 경우에 유용합니다 .height속성 지정 은 선택 사항이며 필요에 따라 제거 / 유지할 수 있습니다.cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */ }그건 그렇고, 요소 에
height및width속성 을 제공 할 필요가 없습니다image. 스타일에 의해 재정의되기 때문입니다.
이렇게 작성하면 충분합니다.<img class="cover" src="url to img ..." />
CSS 솔루션 JS 및 배경 이미지 없음 :
방법 1 "여백 자동"(IE8 +-NOT FF!) :
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>방법 2 "변환"(IE9 +) :
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>http://jsfiddle.net/5xjr05dt/1/
방법 2를 사용하여 고정 너비 / 높이 컨테이너에 이미지를 중앙에 배치 할 수 있습니다. 둘 다 오버플로 할 수 있으며 이미지가 컨테이너보다 작은 경우 여전히 중앙에 배치됩니다.
http://jsfiddle.net/5xjr05dt/3/
방법 3 "이중 래퍼"(IE8 +-NOT FF!) :
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}<div class="outer">
<div class="inner">
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>http://jsfiddle.net/5xjr05dt/5/
방법 4 "이중 래퍼 및 이중 이미지"(IE8 +) :
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}<div class="outer">
<div class="inner">
<img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>http://jsfiddle.net/5xjr05dt/26/
- 방법 1은 약간 더 나은 지원을 제공합니다-이미지의 너비 또는 높이를 설정해야합니다!
- 접두어를 사용하면 방법 2도 괜찮은 지원을합니다 (ie9 이상). 방법 2는 Opera mini를 지원하지 않습니다!
- 방법 3은 두 개의 래퍼를 사용합니다. 너비와 높이가 오버플로 될 수 있습니다.
- 방법 4는 이중 이미지 (하나는 자리 표시 자)를 사용하여 추가 대역폭 오버 헤드를 제공하지만 더 나은 크로스 브라우저 지원을 제공합니다.
방법 1과 3이 Firefox에서 작동하지 않는 것 같습니다
또 다른 해결책은 이미지를 원하는 너비와 높이의 컨테이너에 넣는 것입니다. 이 방법을 사용하면 이미지를 요소의 배경 이미지로 설정할 필요가 없습니다.
그런 다음 img태그를 사용 하여이 작업을 수행 하고 요소에 최대 너비와 최대 높이를 설정하십시오.
CSS :
.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}
HTML :
<div class='imgContainer'>
<img src='imagesrc.jpg' />
</div>
이제 컨테이너의 크기를 변경하면 이미지가 경계를 벗어나거나 왜곡되지 않고 최대한 크게 커집니다.
이미지를 세로 및 가로 로 가운데에 맞추려면 컨테이너 CSS를 다음과 같이 변경할 수 있습니다.
.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}
다음은 JS Fiddle입니다. http://jsfiddle.net/9kUYC/2/
jQuery를 사용하여 @Dominic Green의 대답을 바탕으로 다음은 이미지보다 더 넓거나 더 넓은 이미지에 적합 해야하는 솔루션입니다.
JavaScript를 수행하는 더 우아한 방법이있을 수 있지만 작동합니다.
function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();
필 모어 라는 jQuery 플러그인을 빌드하는 데 도움이되었습니다.이 플러그인 background-size: cover은 지원하는 브라우저 를 처리하고 지원하지 않는 브라우저 를 처리합니다 . 한번보세요!
다음과 같이 해보십시오 : http://jsfiddle.net/D7E3E/4/
오버플로가있는 컨테이너 사용 : 숨김
편집 : @ 도미닉 그린 이길.
이미지를 늘리거나 자르지 않고 이미지를 특정 크기로 채 웁니다.
img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}
나는이 답변에 꽤 늦었다 고 생각합니다. 어쨌든 이것이 미래에 누군가를 도울 수 있기를 바랍니다. 카드를 각도로 배치하는 데 문제가 있습니다. 이벤트 배열에 카드가 표시됩니다. 이벤트의 이미지 너비가 카드에 비해 큰 경우 이미지를 양면에서 자르고 높이 100 %로 표시해야합니다. 이미지 높이가 길면 이미지 하단 부분이 잘리고 너비가 100 %입니다. 여기 내 순수한 CSS 솔루션이 있습니다.
HTML :
<span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>
CSS
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
- CSS 배경을 사용하지 않음
- 클립 할 때 1 div 만
- 올바른 종횡비를 유지하는 것보다 최소 너비로 크기 조정
- 중심에서 자르기 (수직 및 수평으로, 상단, 파일 및 변형을 사용하여 조정할 수 있음)
테마 나 무언가를 사용하는 경우에는 img max-width를 100 %로 선언합니다. 당신은 아무것도하지 않아야합니다. 그것을 테스트 :)
https://jsfiddle.net/o63u8sh4/
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
min-width:100%;
min-height:100%;
height:auto;
position:relative;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
전체 화면으로 이미지를 맞추려면 다음을 시도하십시오.
배경 반복 : 라운드;
참고 URL : https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch
'development' 카테고리의 다른 글
| BREW 업데이트 : 다음 추적되지 않은 작업 트리 파일을 병합하여 덮어 씁니다. (0) | 2020.02.27 |
|---|---|
| 파일 또는 어셈블리를로드 할 수 없습니다 ... 형식이 잘못된 프로그램을로드하려고했습니다 (System.BadImageFormatException). (0) | 2020.02.27 |
| 작은 모니터를 큰 모니터로 전환 할 때 tmux 창을 다시 그릴 수있는 방법이 있습니까? (0) | 2020.02.27 |
| JavaScript에서 문자열의 악센트 / 분음 부호 제거 (0) | 2020.02.27 |
| 모든 JavaScript 프로그래머가 알아야 할 사항은 무엇입니까? (0) | 2020.02.27 |