如何按比例调整图像大小

Question

我怎样才能像他们在这里一样调整图像大小 网站.

当你放大那张图片时，它说 "辐射功率" ，它不会变大。与网站上的其他元素相比，只是保持相同的大小。

你们能给我一些关于如何做到这一点的提示吗，我似乎在任何地方都找不到答案。

这是我的网站：网站

它位于免费域上，因此加载速度会很慢。如您所见，我使大局工作，因为它是 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">