Javascript 如何根据屏幕大小调整图像大小

如何根据屏幕大小调整图像的大小。例子： 我有一个标签（宽：1349，高：449）和一个div中的图像（宽：78，高：78）。在div I中显示图像时，图像的宽度固定为60，高度固定为60。我在手机屏幕上看到，当时图像的大小仍然保持不变，所以现在我想根据屏幕自动调整图像显示大小示例：在iPhone4中，图像的大小（20x20）或屏幕中图像的百分比。我如何使用公式来计算它？这是我计算它的jquery代码

            var mw = $("#c").width();
            var mh = $("#c").height();
            console.log();

            var img = new Image();
            img.src = './img/photo-circle.png';
            var wdImg = img.width;
            var hiImg = img.height;
            var ratioImg = wdImg/hiImg;
            var ratioDiv = mw/mh;

            if (ratioDiv > 1) {
                var newwd = wdImg*(mh/hiImg);
                alert(newwd);
            } ;

---

您应该使用百分比来实现元素的动态大小调整。然后，只要父母也在动态调整大小，他们的孩子也会。例如，

宽度：30%代替
宽度：100px
使用css单元vh和vw

每个单元相当于屏幕大小的1%


例如：

.item {
    height: 20vw;
    width: 20vw;
}

如果屏幕宽度为100像素，.item将是20px乘以20px
只需在img标记处使用名为“img responsive”的引导类即可。
仅此而已，它在任何屏幕上都会响应。
媒体查询和/或用户代理识别。您可以将图像宽度和高度设置为其父分区的百分比。我使用画布绘制它，因此我使用javascript计算。如何使用公式计算百分比？我使用画布绘制它，因此我使用javascript计算。如何使用公式来计算百分比？我使用javascript来计算。请检查上面的代码并帮助我。非常感谢。OP没有表示他/她正在使用Bootstrap作为库。