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

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