javascript - 如何根据屏幕尺寸调整图像大小

Question

如何根据屏幕尺寸调整图像大小。例子:我有一个标签(宽度:1349，高度:449)和一个 div 中的图像(宽度:78，高度:78)。当在 div 中显示图像时，我将图像的宽度固定为 60，高度为 60。我在移动屏幕上看到图像的大小仍然保持状态，所以现在我想图像显示自动调整大小基于屏幕示例:在 iPhone 4 中图像在屏幕上有大小 (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);
            } ;

Answer 1

您应该使用百分比来动态调整元素的大小。然后，只要 parent 也在动态调整大小，他们的 child 也会这样做。例如，width: 30%; 而不是 width: 100px;