이미지로 작업 중이며 가로 세로 비율 관련 문제가 발생했습니다.

<img src="big_image.jpg" width="900" height="600" alt="" />

당신이 볼 수있는 것처럼 height하고 width이미 지정되어 있습니다. 이미지에 CSS 규칙을 추가했습니다.

img {
  max-width:500px;
}

그러나 위해 big_image.jpg, 나는 수신 width=500및 height=600. 가로 세로 비율을 유지하면서 이미지 크기를 조정하는 방법

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

이렇게하면 지정된 영역에 비해 너무 큰 경우 이미지가 축소됩니다 (단점은 이미지를 확대하지 않음).

나는이 문제로 어려움을 겪고 결국이 간단한 해결책에 도달했습니다.

object-fit: cover;
width: 100%;
height: 250px;

필요에 맞게 너비와 높이를 조정할 수 있으며 개체 맞춤 속성이 자르기를 수행합니다.

건배.

아래 솔루션을 사용 하면 부모 상자 너비에 따라 이미지를 확대 및 축소 할 수 있습니다.

모든 이미지에는 데모 용으로 고정 된 너비의 부모 컨테이너가 있습니다. 프로덕션에서 이것은 부모 상자의 너비가됩니다.

모범 사례 (2018) :

이 솔루션은 사용 가능한 최대 너비로 이미지를 렌더링하고 해당 너비의 백분율로 높이를 조정하도록 브라우저에 지시합니다.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

더 환상적인 솔루션 :

더 멋진 솔루션을 사용하면 크기에 관계없이 이미지를 자르고 배경색을 추가하여 자르기를 보정 할 수 있습니다.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

패딩을 지정하는 선의 경우 이미지의 종횡비를 계산해야합니다. 예를 들면 다음과 같습니다.

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

따라서 상단 패딩 = 34.37 %입니다.

background-size 속성은 ie> = 9이지만 괜찮다면 div를 사용 background-image하고 설정할 수 있습니다 background-size: contain.

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

이제 div 크기를 원하는대로 설정할 수 있으며 이미지의 가로 세로 비율을 유지할뿐만 아니라 div 내에서 가로 및 세로로 중앙 집중화됩니다. div에는 태그 자체에 너비 / 높이 속성이 없으므로 CSS에서 크기를 설정하는 것을 잊지 마십시오.

이 접근법은 setecs 답변과 다릅니다.이를 사용하면 이미지 영역이 일정하고 사용자가 정의합니다 (div 크기 및 이미지 종횡비에 따라 가로 또는 세로로 빈 공간을 남겨 둡니다) .setecs 응답은 정확하게 크기가 조정 된 이미지의 크기 (공백 없음).

편집 : MDN 배경 크기 설명서 에 따르면 독점 필터 선언을 사용하여 IE8에서 배경 크기 속성을 시뮬레이션 할 수 있습니다.

Internet Explorer 8은 background-size 속성을 지원하지 않지만 비표준 -ms-filter 함수를 사용하여 일부 기능을 에뮬레이션 할 수 있습니다.

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

여기에 대한 답변과 매우 유사하지만 제 경우에는 때때로 키가 더 크고 때로는 더 큰 이미지가 있습니다.

이 스타일은 모든 이미지가 사용 가능한 모든 공간을 사용하고 비율을 유지하고 잘리지 않도록하는 매력처럼 작동했습니다.

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

"높이"속성을 제거하십시오.

<img src="big_image.jpg" width="900" alt=""/>

둘 다 지정하면 이미지의 종횡비가 변경됩니다. 하나만 설정하면 크기가 조정되지만 종횡비는 유지됩니다.

선택적으로 대형화를 제한하려면 다음을 수행하십시오.

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

CSS에 추가하면 원래 비율을 유지하면서 자동으로 축소되고 확장됩니다.

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

이와 이미지의 가로 세로 비율을 유지하는 표준 방법은 없습니다 width, height그리고 max-width함께 지정했습니다.

따라서 이미지를로드하는 동안 페이지 "점프" 를 지정 width및 height방지하거나 max-width이미지의 크기 를 사용 및 지정하지 않아야합니다.

width(없이 height) 만 지정 하면 일반적으로 의미가 없지만 스타일 시트에 height규칙을 추가 하여 HTML 속성 을 재정의 할 수 있습니다 IMG {height: auto; }.

관련 Firefox 버그 392261 도 참조하십시오 .

해결책은 다음과 같습니다.

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

이렇게하면 이미지가 항상 전체 부모를 덮고 (확대 및 축소) 동일한 종횡비를 유지합니다.

이미지 컨테이너 태그의 CSS 클래스를 다음으로 설정하십시오 image-class.

<div class="image-full"></div>

CSS 스타일 시트에 추가하십시오.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

이미지를 특정 종횡비로 유지하면서 반응 형 이미지를 유지하려면 다음을 수행하십시오.

HTML :

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

그리고 SCSS :

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

작성자가 업로드하는 이미지의 크기에 관계없이 특정 종횡비를 적용하는 데 사용할 수 있습니다.

http://codepen.io/Kseso/pen/bfdhg의 @Kseso에게 감사드립니다 . 더 많은 비율과 실제 예제는이 URL을 확인하십시오.

이미지를 정확한 크기로 맞추려면 너무 많은 코드를 작성할 필요가 없습니다. 너무 간단합니다

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

여기에 이미지를 넣어하려는 경우 대답 폭의 고정 비율 ,하지만 폭의 픽셀을 고정하지 .

그리고 이것은 다른 크기의 화면을 다룰 때 유용합니다 .

트릭은

1. padding-top너비에서 높이를 설정하는 데 사용 합니다.
2. 사용 position: absolute패딩 공간에 이미지를 넣는 데 합니다.
3. 사용 max-height and max-width이미지가 부모 요소 위에 있지 않은지 확인하는 데 합니다.
4. 사용 display:block and margin: auto이미지를 중앙에 맞추기 위해 합니다.

또한 바이올린 내부의 대부분의 트릭에 대해서도 언급했습니다.

나는 또한 이것을 가능하게하는 다른 방법들을 발견한다. html에는 실제 이미지가 없으므로 html에 "img"요소가 필요할 때 개인적으로 최고의 대답을 제시합니다.

배경 http://jsfiddle.net/4660s79h/2/ 를 사용하여 간단한 CSS

상단에 단어가있는 배경 이미지 http://jsfiddle.net/4660s79h/1/

위치 절대를 사용하는 개념은 여기에서 http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

이것을 사용할 수 있습니다 :

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

다음과 같이 div를 만들 수 있습니다.

<div class="image" style="background-image:url('/to/your/image')"></div>

이 CSS를 사용하여 스타일을 지정하십시오.

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

반응 형 접근 방식을 위해 모범 사례는 다음과 같이 뷰포트 단위 및 최소 / 최대 속성을 사용하는 것이 좋습니다 .

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

이렇게하면 지정된 영역에 비해 너무 큰 경우 이미지가 축소됩니다 (단점은 이미지를 확대하지 않음).

setec의 솔루션은 자동 모드의 "Shrink to Fit"에 적합합니다. 그러나 '자동'모드에 맞게 최적으로 확장하려면 먼저 수신 된 이미지를 임시 ID로 넣어야합니다. 가로 또는 세로 비율에 따라 가로 또는 세로 비율에 따라 가로 또는 세로로 확대 할 수 있는지 확인하십시오. 디스플레이 블록),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

이 방법은 수신 된 이미지가 디스플레이 상자보다 작을 때 유용합니다. 크기와 대역폭을 절약하기 위해 더 큰 표시 상자를 채우려면 확장 버전이 아닌 원본 작은 크기로 서버에 저장해야합니다.

수직 정렬에 의사 요소를 사용하는 것은 어떻습니까? 이 적은 코드는 회전 목마 용이지만 모든 고정 크기 컨테이너에서 작동하는 것 같습니다. 가로 세로 비율을 유지하고 가장 짧은 치수로 위 / 아래 또는 왼쪽 / 쓰기에 @ 회색 막대를 삽입합니다. 한편, 이미지는 텍스트 정렬에 의해 수평으로 그리고 의사 요소에 의해 수직으로 센터링된다.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

전체 화면 프레젠테이션 :

img[data-attribute] {height: 100vh;}

뷰포트 높이가 이미지보다 큰 경우 이미지는 차이에 비해 자연스럽게 저하됩니다.

마지막으로 이것이 가장 쉽고 쉬운 솔루션이라고 생각 합니다 .

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