[html] CSS를 통해 높이와 너비가 다른 모든 이미지를 동일하게 만들려면 어떻게해야합니까?

Question 1

제품 사진으로 구성된 이미지 월을 만들려고합니다. 불행히도 모두 높이와 너비가 다릅니다. CSS를 사용하여 모든 이미지를 같은 크기로 보이게하려면 어떻게해야합니까? 바람직하게는 100 x 100.

나는 높이와 너비가 100px 인 div를 만들고 어떻게 채우는지를 생각하고있었습니다. 어떻게해야할지 모르겠습니다.

어떻게해야합니까?

Question 2

업데이트 된 답변 (IE11 지원 없음)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

스 니펫 확장

원래 답변

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

스 니펫 확장

Question 3

이미지를 너무 많이 왜곡하면, 즉 비율을 벗어난 경우 제대로 보이지 않을 수 있습니다.-작은 양은 좋지만 이미지를 ‘컨테이너’안에 넣는 것이 좋습니다. 컨테이너를 100 x 100으로 설정 한 다음 이미지를 오버플로하지 않도록 설정하고 가장 작은 너비를 컨테이너의 최대 너비로 설정하면 이미지가 약간 잘립니다.

예를 들면

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

이렇게하면 이미지가 컨테이너의 크기를 유지하지만 제약 조건을 깨지 않고 크기가 조정됩니다.

Question 4

가장 간단한 방법-이미지 크기를 그대로 유지하고 다른 영역을 공간으로 채 웁니다. 이렇게하면 이미지 크기에 관계없이 모든 이미지가 늘어나지 않고 동일한 지정된 공간을 차지합니다.

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

Question 5

object-fit속성을 사용 하여 img요소의 크기를 조정할 수 있습니다 .

cover컨테이너를 채우도록 이미지를 비례 적으로 늘리거나 줄입니다. 이미지는 필요한 경우 가로 또는 세로로 잘립니다.
contain 컨테이너 내부에 맞도록 이미지를 비율에 따라 늘리거나 줄입니다.
scale-down 컨테이너 내부에 맞도록 이미지를 비례 적으로 축소합니다.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}

<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

스 니펫 확장

위의 예에서 빨간색은 가로, 녹색은 세로, 파란색은 정사각형 이미지입니다. 체크 무늬 패턴은 16x16px 정사각형으로 구성됩니다.

Question 6

부트 스트랩을 사용 하고 응답 성을 잃고 싶지 않은 사람들 은 컨테이너의 너비를 설정하지 마십시오. 다음 코드는 gillytech 게시물을 기반으로 합니다.

index.hmtl

<div id="image_preview" class="row">
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6"
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

또는 style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

Question 7

다음과 같이 할 수 있습니다.

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}

Question 8

나는 로고 목록을 만들기 위해 동일한 문제에 대한 해결책을 찾고있었습니다.

이전 브라우저에 대해 걱정하지 않기 때문에 약간의 flexbox를 사용하는이 솔루션을 생각해 냈습니다.

이 예제는 100x100px 상자를 가정하지만 크기가 유연하고 반응이 좋을 수 있다고 확신합니다.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

추신 : 일부 접두사를 추가하거나 자동 접두사를 사용해야 할 수 있습니다.