HTML 이미지 크기 조정

HTML img 태그로 큰 이미지를 표시하려고합니다. 현재 그들은 화면의 가장자리를 벗어납니다. 브라우저 창에 유지되도록 크기를 조정하려면 어떻게해야합니까?

또는 이것이 불가능할 가능성이있는 경우 "이 이미지를 일반 너비 및 높이의 50 %로 표시"라고 말할 수 있습니까?

너비 및 높이 속성은 이미지를 왜곡합니다. 제가 아는 한, 컨테이너가 끝날 수있는 속성을 참조하기 때문에 이미지와 관련이 없습니다. 픽셀 크기가 다른 많은 이미지 모음을 처리해야하기 때문에 픽셀을 지정할 수 없습니다. 최대 너비가 작동하지 않습니다.

width또는 설정 만height , 그것은 자동으로 다른 크기를 조절합니다. 그리고 예, 백분율을 사용할 수 있습니다.

첫 번째 부분은 수행 할 수 있지만 JavaScript가 필요하므로 모든 사용자에게 작동하지 않을 수 있습니다.

CSS로 충분합니다.

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

나는이 질문이 오랫동안 요청되었다는 것을 알고 있지만 오늘 현재 한 가지 간단한 대답은 다음과 같습니다.

<img src="image.png" style="width: 55vw; min-width: 330px;" />

vw 의 사용 를 하면 너비가 뷰포트 너비의 55 %에 상대적임을 알 수 있습니다.

오늘날 모든 주요 브라우저가이를 지원합니다.

이 링크를 확인하십시오 .

자바 스크립트가 필요하지 않습니다.

IE6 Internet Explorer 6

백분율은 요소의 너비에 대해서만 작동하지만 height:100%;올바른 코드가 없으면 작동하지 않습니다.

CSS

html, body { height:100%; } 

그런 다음 백분율을 사용하면 제대로 작동하고 창 크기 조정시 동적으로 업데이트됩니다.

<img src="image.jpg" style="height:80%;">

너비 속성이 필요하지 않으며 브라우저 창 크기가 변경되면 너비가 비례 적으로 조정됩니다.

그리고이 작은 보석은 이미지가 확대 된 경우에 (과도하게) 고르지 않게 보이지 않습니다 (보간).

img { -ms-interpolation-mode: bicubic; }

Props go to this source : Ultimate IE6 Cheatsheet : How To Fix 25+ Internet Explorer 6 Bugs

추가 max-width: 100%;받는 사람 img태그 나를 위해 작동합니다.

가장 좋은 해결책은 스크립트를 통해 이미지의 크기를 조정하거나 로컬에서 다시 업로드하는 것입니다. 시청자가 필요한 것보다 더 큰 파일을 다운로드하도록 강요하고 있음을 기억하세요.

이 작업을 수행하는 방법을 아는 가장 좋은 방법은 다음과 같습니다.

1) 오버플로를 스크롤로 설정하면 이미지가 그대로 유지되지만 스크롤하여 볼 수 있습니다.

2) 더 작은 이미지를 업로드하십시오. 이제 업로드 할 때 많은 프로그램이 있습니다 (이 btw를 수행하려면 PHP 또는 .net과 같은 것이 필요합니다). 자동 크기 조정이 가능합니다.

3) 그것과 함께 생활하고 너비와 높이를 설정하면 왜곡되어 보이지만 올바른 크기로 인해 사용자는 전체 크기 이미지를 다운로드해야합니다.

행운을 빕니다!