[css] CSS 이미지 크기, 채우는 방법, 늘리지 않는 방법?

Program / 글쓴이

이미지가 있는데 특정 너비와 높이를 픽셀 단위로 설정하고 싶습니다

그러나 css ( width:150px; height:100px)를 사용하여 너비와 높이를 설정하면 이미지가 늘어나고보기 흉할 수 있습니다.

방법 기입 CSS를 사용하여 특정 크기로 이미지를, 그리고 스트레칭하지 그것을?

채우기 및 스트레칭 이미지의 예 :

원본 이미지 :

기발한

기지개 된 이미지 :

뻗어

채워진 이미지 :

채우는

제발 상기 채워진 이미지 예에 유의 : 첫째, 화상 150×255 (유지 종횡비)로 조정되고, 그 후, 그 자른 150×100한다.

답변

이미지를 CSS 배경으로 사용하려면 우아한 솔루션이 있습니다. 간단하게 사용 cover하거나 contain에서 background-sizeCSS3 속성입니다.

.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%;
}
<div class="container"></div>​

스 니펫 확장

하지만 cover당신에게 스케일 업 이미지를 제공합니다 contain당신에게 축소 이미지를 줄 것이다. 둘 다 픽셀 종횡비를 유지합니다.

http://jsfiddle.net/uTHqs/ (표지 사용)

http://jsfiddle.net/HZ2FT/ (포함 사용)

이 방법은 Thomas Fuchs의 빠른 가이드에 따라 Retina 디스플레이에 친숙하다는 장점이 있습니다.

두 속성 모두에 대한 브라우저 지원은 IE6-8을 제외 한다는 점을 언급 할 가치가 있습니다.

답변

css 속성을 사용할 수 있습니다 object-fit.

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

스 니펫 확장

여기 예를 참조하십시오

IE에 대한 polyfill이 있습니다 : https://github.com/anselmh/object-fit

답변

@afonsoduarte에 의해 위의 답변이 향상 되었습니다 ( 허용 되지 않음 ) .
부트 스트랩을
사용하는 경우

세 가지 차이점이 있습니다.

  1. width:100%스타일을 제공 합니다. 부트 스트랩
    을 사용 하고 이미지를 사용 가능한 모든 너비로 늘리려 는 경우에 유용합니다 .

  2. height속성 지정 은 선택 사항이며 필요에 따라 제거 / 유지할 수 있습니다

    .cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}

  3. 그건 그렇고, 요소 에 height및 width속성 을 제공 할 필요가 없습니다 image. 스타일에 의해 재정의되기 때문입니다.
    이렇게 작성하면 충분합니다.

    <img class="cover" src="url to img ..."  />

답변

유일한 실제 방법은 이미지 주위에 컨테이너를 가지고 사용하는 것입니다 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에서 원하는 것을하고 이미지를 중앙에 배치하는 것은 고통 스럽습니다.

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

답변

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>

스 니펫 확장

http://jsfiddle.net/5xjr05dt/

방법 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의 답변을 바탕으로 다음은 이미지보다 더 넓거나 더 넓은 이미지에 적합 해야하는 솔루션입니다.

http://jsfiddle.net/grZLR/4/

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();