비례를 유지하면서 이미지로 div를 어떻게 채울 수 있습니까?

이 스레드를 찾았 습니다. 이미지의 종횡비를 유지하면서 <div>를 채우기 위해 이미지를 늘리는 방법은 무엇입니까? — 그것이 내가 원하는 것이 전부는 아닙니다.

특정 크기와 그 안에 이미지가있는 div가 있습니다. 이미지가 가로인지 세로인지에 관계없이 항상 div를 이미지로 채우고 싶습니다 . 그리고 이미지가 잘 렸는지 여부는 중요하지 않습니다 (div 자체에 오버플로가 숨겨져 있음).

이미지가 세로 경우 그래서 내가 원하는 width일을 100%하고는 height:auto이 비율에 남아 있도록. 이미지가 가로 인 경우 내가 원하는 height일을 100%하고 width to beauto`. 복잡해 보이죠?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

어떻게해야할지 모르기 때문에 나는 단순히 내가 의미하는 바에 대한 빠른 이미지를 만들었습니다. 제대로 설명 할 수도 없습니다.

그래서 나는 이것을 묻는 첫 번째 사람이 아닌 것 같습니다. 그러나 나는 이것에 대한 해결책을 실제로 찾지 못했습니다. 새로운 CSS3 방식이있을 수 있습니다. 저는 flex-box를 생각하고 있습니다. 어떤 생각? 내가 예상했던 것보다 훨씬 쉬울 수도 있습니다.

원하는 것을 올바르게 이해했다면 가로 세로 비율을 유지하기 위해 너비 및 높이 속성을 이미지에서 제외하고 flexbox를 사용하여 중앙 정렬을 수행 할 수 있습니다.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

여기에 JSFiddle

IE9, Chrome 31 및 Opera 18에서 성공적으로 테스트했습니다. 그러나 다른 브라우저는 테스트되지 않았습니다. 항상 그렇듯이 특정 지원 요구 사항을 고려해야합니다.

조금 늦었지만 똑같은 문제가 있었고 마침내 다른 stackoverflow 게시물 ( https://stackoverflow.com/a/29103071 ) 의 도움으로 해결했습니다 .

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

이것이 여전히 누군가에게 도움이되기를 바랍니다.

추신 : 또한 max-height , max-width , min-width 및 min-height CSS 속성 과 함께 작동 합니다. 특히 100 % 또는 100vh / 100vw 와 같은 길이 단위 를 사용하여 컨테이너 또는 전체 브라우저 창을 채울 때 편리 합니다.

오래된 질문이지만 지금은 방법이 있으므로 업데이트 할 가치가 있습니다.

올바른 CSS 기반 대답은를 사용 object-fit: cover하는 것 background-size: cover입니다. 위치 지정은 object-position속성 별로 처리 되며 기본값은 중심입니다.

그러나 IE / Edge 브라우저 또는 Android <4.4.4에서는 지원되지 않습니다. 또한 object-positionSafari, iOS 또는 OSX에서는 지원되지 않습니다. Polyfill이 존재하며, object-fit-images 가 최상의 지원을 제공하는 것 같습니다.

속성의 작동 방식에 대한 자세한 내용 은 설명 및 데모 에object-fit 대한 CSS 트릭 문서를 참조하십시오 .

이렇게해야합니다.

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

아래의 모든 답변은 너비와 높이가 고정되어있어 솔루션이 "응답하지 않음"을 나타냅니다.

결과를 얻지 만 이미지 반응을 유지하기 위해 다음을 사용했습니다.

1. 컨테이너 내부에 원하는 비율로 투명한 GIF 이미지를 배치하십시오.
2. 크기를 조정하고 자르려는 이미지와 함께 이미지 태그 인라인 CSS 배경 제공

HTML :

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

css flex 속성을 사용하여이를 달성 할 수 있습니다. 아래 코드를 참조하십시오

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

background-size: cover와 함께 (IE9 +) 사용을 고려하십시오 background-image. IE8-의 경우 polyfill이 있습니다.

이 시도:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

도움이 되었기를 바랍니다

이를 위해 div를 사용할 수 있습니다. img 태그없이 :) 이것이 도움이되기를 바랍니다.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

설명 된 "최상의"시나리오를 달성 한 유일한 방법은 이미지를 배경으로 만드는 것입니다.

<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%;
}​

다음은 IE 지원에 대한 답변입니다. object-fit비율을 잃지 않도록

간단한 JS는이 경우 검출 니펫 사용 object-fit교체 후지지되고 imgA의svg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

참고 : 또한 몇 가지 object-fitpolyfill 이 있습니다.object-fit 작동 있습니다.

다음은 몇 가지 예입니다.

• 개체 맞춤 이미지
• constancecchen / object-fit-pollyfill
• CSS 개체 맞춤 속성에 대한 Polyfill

여기 내 작업 예가 있습니다. background-size : cover 및 background-position : center center를 사용하여 이미지를 div 컨테이너의 배경으로 설정하는 트릭을 사용했습니다.

너비 : 100 % 및 불투명도 : 0으로 이미지를 배치하여 보이지 않게했습니다. 내 이미지는 자식 클릭 이벤트를 호출하는 데 특별한 관심이 있기 때문에 표시됩니다.

내가 각도를 사용한다는 것은 완전히 관련이 없다는 점에 유의하십시오.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

결과는 모든 경우에 최적으로 정의한 결과입니다.

이제 CSS object-fit: cover및 object-position: left center속성 값이이 문제를 해결합니다.

이미지의 높이를 수정하고 너비 = 자동을 제공하십시오.

img{
    height: 95vh;
    width: auto;
}