이미지의 크기를 비례 적으로 조정할 수있는 방법

Question

여기에서했던 것처럼 이미지의 크기를 조정할 수있는 방법 website.

"Radiant Power"라고 표시된 그림을 확대하면 커지지 않습니다. 사이트의 다른 요소와 동일한 크기로 유지됩니다.

여러분이 저에게 할 수있는 방법에 대한 조언을 해 주실 수 있습니까? 나는 어디서나 대답을 찾을 수 없습니다. 이 느린로드 할 수 있도록 그것은 무료 도메인에서의 site

:

여기 내 웹 사이트입니다. 당신이 볼 수 있듯이 나는 100vw이기 때문에 큰 그림 작업을 만들었습니다. 그래서 다루기가 더 쉬워졌습니다. 확대 할 때도 똑같이 유지됩니다. 이제 화면을 확대 할 때 작은 그림의 크기를 조정하고 싶습니다. 내가 보여 줬던 그 웹 사이트와 같은 비율. 당신은 단지 다음과 같이 총 너비/높이의 퍼센트에 이미지 스케일을

$(function() { 
    var scr=screen.width; 
    if($(window).width() > scr){ 
     $("#wall").width(scr + 'px'); 
     $("#content").width(scr + 'px'); 
     $("#body-wrap").width(scr + 'px'); 
     $("header").width(scr + 'px'); 
     $("ul:eq(0)").width(scr + 'px'); 
    } 
    else{ 
     $("#wall").width('100vw'); 
     $("#wall").height('auto'); 
     $("#body-wrap").width('100vw'); 
     $("header").width('100vw'); 
     $("ul:eq(0)").width('100vw'); 

    } 
    $(window).resize(function() { 
     if($(window).width() > scr){ 
      $("#wall").width(scr + 'px'); 
      $("#content").width(scr + 'px'); 
      $("#body-wrap").width(scr + 'px'); 
      $("header").width(scr + 'px'); 
      $("ul:eq(0)").width(scr + 'px'); 
     } 
     else { 
      $("#wall").width('100vw'); 
      $("#wall").height('auto'); 
      $("#body-wrap").width('100vw'); 
      $("header").width('100vw'); 
      $("ul:eq(0)").width('100vw'); 
     } 
    }); 
}); 

Answer 1

:
https://jsfiddle.net/bhdpmhgc/1/

#test{ 
 
    width: 10%; 
 
    height: 10%; 
 
}

<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">

는 여기에 내가 큰 사진 크기 조정을 한 방법은 그 jsfiddle

입니다