如何按比例调整图像大小答案

【问题标题】：How can I resize my image proportionally如何按比例调整图像大小
【发布时间】：2017-09-04 11:06:48
【问题描述】：

我怎样才能像他们在这里website 那样调整我的图像大小。

当您放大显示“Radiant Power”的图片时，它并没有变大。与网站上的其他元素相比，大小保持不变。

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

这是我的网站：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');
        }
    });
});

【问题讨论】：

该网站上的其他图片也保持不变。请添加您尝试过的代码。

标签： javascript css image image-resizing

【解决方案1】：

您只需像这样按总宽度/高度的百分比缩放图像：
https://jsfiddle.net/bhdpmhgc/1/

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

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

【讨论】：