css

이 스레드를 찾았 습니다. 이미지의 종횡비를 유지하면서 <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를 생각하고 있습니다. 어떤 생각? 내가 예상했던 것보다 훨씬 쉬울 수도 있습니다.

답변

.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>

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

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

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

.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>