如何按比例調整圖像大小

Question

如何調整圖像大小，如同他們在這裏所做的那樣website。

當您放大那張照片中的「輻射功率」時，它不會變大。與網站上的其他元素相比，保持相同的尺寸。

你們可以給我一些關於如何做到這一點的提示，我似乎無法在任何地方找到答案。

這裏是我的網站：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">