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

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

Question 9

Andi Wilkinson의 답변 (두 번째 답변)을 기반으로 약간 개선 되었으며 이미지의 중심이 표시되는지 확인합니다 (수락 된 답변처럼).

HTML :

<div class="crop">
   <img src="img.png">
</div>

CSS :

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}

Question 10

CSS 파일에서 높이 및 너비 매개 변수 설정

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

스 니펫 확장

Question 11

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

이미지 크기를 div와 동일하게 만들고 부트 스트랩 그리드를 사용하여 div 크기를 적절하게 조작 할 수 있습니다.

Question 12

이미지 크기는 div 높이와 너비에 의존하지 않습니다.

CSS에서 img 요소 사용

다음은 도움이되는 CSS 코드입니다.

div img{
         width: 100px;
         height:100px;
 }

div로 크기를 설정하려면

이것을 사용하십시오

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

이 코드를 사용하면 이미지가 원래 크기로 표시되지만 처음 100x100px 오버플로가 숨겨집니다.

Question 13

코드가 없으면 도움이되지 않지만 다음과 같은 실용적인 조언이 있습니다.

나는 당신의 "이미지 벽"에 스타일을 부여하기 위해 ID 또는 클래스가있는 일종의 컨테이너가 있다고 생각합니다.

예 :

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

위와 유사하게 코드를 설정하면 로고와 같은 다른 이미지에 영향을주지 않으면 서 이미지 월의 모든 이미지에 크기를 스타일링하는 것은 쉽습니다.

#imagewall img {
  width: 100px;
  height: 100px; }

그러나 이미지가 완벽하게 정사각형이 아닌 경우이 방법을 사용하면 왜곡됩니다.

Question 14

CSS 파일로 이동하여 다음과 같이 모든 이미지의 크기를 조정하십시오.

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