画像を比例的にサイズ変更するには

Question

websiteのように画像のサイズを変更するにはどうすればよいですか？

"Radiant Power"と表示されている画像をズームインすると、大きくならない。サイト上の他の要素と同じサイズのままです。

あなたは私にそれを行う方法についていくつかのヒントを教えてもらえますか？回答はどこでも見つけることができません。それが遅いロードされますので、それが無料のドメイン上にあるsite

：

は、ここに私のウェブサイトです。 あなたが見ることができるように私は100vwなので大きな写真を作ったので、扱いがはるかに簡単です...ズームインすると同じままです。ズームインしてそのアスペクトを保持するときに、私が示したウェブサイトのような比率。ここで

は、私は大画面のサイズ変更をした方法ですjsfiddle

です：

$(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">