브라우저 크기 조정의 비례 이미지 너비 설정

Question

스타일과 결합 된 이미지가 있다면 :

<img class="test" src="testimage.jpg" />

img.test { width: 50%;}

이미지는 포함 된 상자의 너비를 50%로 크기를 조정하고 세로로 크기를 조정하여 종횡비를 유지합니다.

이를 위해서는 Encling Div가 특정 너비와 높이 값으로 설정되어야합니다. 그러나 브라우저가 더 작거나 크게 드래그 될 때 Enclosing Div가 자동으로 크기를 조정하기를 원한다면 이것이 문제가되지 않습니까?

Answer 1

나는 당신에 대한 나의 대답을 명확히했다 원래 질문. 보고보고 그것이 상황을 정리하는지 확인하십시오. 다소, 이미지가 창으로 크기를 조정하려면 캔트 DIV를 고정 너비와 높이로 설정하십시오. DIV는 폭과 높이도 있어야합니다.

Answer 2

수동으로 지정해야합니다 width 그리고 height 이미지를 얻기위한 속성 차원을 유지합니다. 서버 측 코딩 (PHP/ASP)을 사용하는 경우에는 어렵지 않습니다.

또 다른 방법은 JavaScript를 사용하여 이미지를 동적으로 계산하고 크기를 조정하는 것입니다.

Answer 3

아니요, 이미지는 여전히 DIV의 50%이며 DIV가 페이지의 비율 인 경우 중요하지 않습니다.

Answer 4

모든 비율 : Enclosing Div는 전체 창의 2/3 일 수 있으며 이미지는 그 중 1/2입니다. 그것은 모두 표시되기 전에 계산됩니다. ;디