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

How to resize of a image base on screen size

本文关键字：图像 调整 屏幕 何根      更新时间：2023-09-26

如何根据屏幕大小调整图像大小。例：我有一个标签（宽度：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);
            } ;

您应该使用百分比来实现元素的动态大小调整。 然后，只要父母也在动态调整大小，他们的孩子也会。 例如，width: 30%;而不是width: 100px;

使用 CSS 单元 vh 和 vw

每个单元价值屏幕尺寸的 1%

http://caniuse.com/#feat=viewport-units

例：

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

如果屏幕宽度为 100 像素，则 .item 将为 20px x 20px

简单地说，您可以在 img 标签上使用一个名为"img-response"的引导类。仅此而已，它将在任何屏幕上响应。

相关文章：