비율을 매개 변수로 사용하여 HTML로 이미지의 크기를 조정하는 방법은 무엇입니까?

Question

내 웹 사이트에서 이미지의 크기를 조정하고 싶습니다. 이전에 이미지의 크기를 조정하거나 너비와 높이를 계산하고 값을 픽셀로 설정하여이를 수행하는 방법을 알고 있습니다. 그러나 동일한 디테일을 여러 번 사용하면 디밍 크기가 다르기 때문에 상대적으로 이미지의 크기를 조절할 수 있습니다.

<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/> 

나는 이것을 시도했지만 문제는 크기가 부모 요소에 상대적으로 설정된다는 것입니다.

Answer 1

HTML 또는 CSS 만 사용하여 자동으로 원하는 것을 수행 할 방법이 없습니다. JavaScript를 사용하여 이미지의 크기를 가져온 다음 해당 크기의 백분율을 계산하여 픽셀 단위로 이미지에 다시 적용해야합니다.

Answer 2

방법이 있지만 완벽하지는 않습니다. 디스플레이가 'inline-block'으로 설정되고 이미지가 'max-width'를 사용하여 크기가 조절되는 배치 요소가 필요합니다.

부모 요소가 이미지의 원래 너비를 유지하므로 문제가 발생할 수 있습니다.

예 : http://jsfiddle.net/amustill/GnEw5/