如何按比例调整图像大小

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