HTML에서 사진 비율을 왜곡하지 않고 너비와 높이를 백분율로 지정

HTML에서 사진 비율을 왜곡하지 않고 너비와 높이를 백분율로 지정

---

너비와 높이 <img>속성에서 너비와 높이를 백분율로 지정할 수 있는지 궁금합니다 .

글쎄요, 그렇게하려고하면 크기가 조정되지만 내 이미지의 품질이 왜곡되는 것처럼 보이기 때문입니다.

다음은 고정 속성이있는 마크 업의 예입니다.

<img src="#" width="346" height="413">

이제 백분율을 통해 이것을 절반으로 축소하려고합니다.

<img src="#" width="50%" height="50%">

다음과는 완전히 다른 것을 얻습니다.

<img src="#" width="173" height="206.5">

두 번째 예제와 세 번째 예제는 시각적으로 눈에 띄는 차이가 있기 때문에 근본적으로 백분율 마크 업 등을 잘못 착각 한 것 같습니다.

---

참고 : HTML 4.01을 사용하지 않는 한 <img> width또는 height속성으로 직접 백분율을 제공하는 것은 유효하지 않습니다 (자세한 내용은 현재 사양 , 사용되지 않는 사양 및 이 답변 참조). 즉, 브라우저는 이전 버전과의 호환성을 지원하기 위해 이러한 동작을 종종 허용합니다.

두 번째 예제의 백분율 너비는 실제로 <img>이미지의 실제 크기가 아닌 컨테이너에 적용됩니다 . 다음 마크 업이 있다고 가정합니다.

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

결과 이미지는 너비가 500px, 높이가 300px입니다.

jQuery 크기 조정

이미지를 너비의 50 %로 줄이려는 경우 jQuery 스 니펫을 사용하여 수행 할 수 있습니다.

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

먼저 높이 / 너비 = 50 % 속성을 제거했는지 확인하십시오.

---

둘 중 하나만 설정할 수 있으며 원하는 결과를 얻을 수 있습니다.

<img src="#" height="50%">

---

차이점은 다음과 같습니다.

이렇게하면 이미지가 원래 크기의 절반으로 설정됩니다.

<img src="#" width="173" height="206.5">

이렇게하면 이미지가 사용 가능한 프레젠테이션 영역의 절반으로 설정됩니다.

<img src="#" width="50%" height="50%">

예를 들어이 요소를 페이지의 유일한 요소로 배치하면 페이지 너비의 50 %를 차지하게되므로 예상대로 원래 크기의 절반이 아닌 원래 크기보다 더 크게 만들 수 있습니다. .

원본 크기보다 크게 표시되는 경우 이미지가 크게 픽셀 화되어 나타납니다.

---

width = "50 %"및 height = "50 %"는 실수가 아니라면 너비와 높이 속성을 부모 요소의 너비와 높이의 절반으로 설정합니다. 또한 백분율을 사용하는 경우 너비 또는 높이 만 설정하면 너비 또는 높이를 부모 요소의 백분율로 설정해야합니다.

---

원본 이미지 크기에 대한 정보가 부족한 경우 너비와 높이에 대한 백분율을 지정하면 매우 불규칙한 결과가 나타납니다. 이미지가 페이지의 특정 위치에 맞는지 확인하려는 경우 일부 서버 측 코드를 사용하여 해당 크기 조정을 관리해야합니다.

---

css3에서 scale 속성을 사용해보십시오.

원본의 75 % :

-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);

원본의 50 % :

-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);

---

에서 W3 스쿨

포함하는 요소의 높이 (예 : "20 %")입니다.

그래서 그들은 div가있는 요소를 의미한다고 생각합니까?

---

실제로 html로만이 작업을 수행하는 방법이 있습니다. 그냥 설정 :

<img src="#" width height="50%">

참조 URL : https://stackoverflow.com/questions/3396475/specifying-width-and-height-as-percentages-without-skewing-photo-proportions-in