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

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

---

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

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

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

<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 {
  width: 150px;
  height: 150px;
  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>

---

여기 내 작업 예가 있습니다. 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>

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

---

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

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

---

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

---

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

<div class="image-wrapper">
  <img src="">
</div>

---

아니요, CSS3 전용 솔루션은 없습니다. 하지만 연결 한 질문에 대한 상위 답변 은 두 번째로 좋은 것입니다.

---

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

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

참고 URL : https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional