Question

如何像在此处website一样调整图片大小。

当你放大那张照片时所说的＆＃34; Radiant Power＆＃34; ，它不会变大。与网站上的其他元素相比，只需保持相同的大小。

你们可以给我一些关于如何做到这一点的提示，我似乎无法在任何地方找到答案。

这是我的网站：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/

＆＃13;

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

＆＃13;

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

＆＃13;

如何按比例调整图像大小

1 个答案: