仅在特定宽高比内隐藏移动设备上的图像

时间:2019-03-18 23:50:51

标签: javascript html mobile

在此先感谢您的帮助!

我们使用的CMS平台在移动设备上无法很好地显示图像,并且希望隐藏它们,因为它们太大了,无法在此处显示(图像包含无法以该尺寸读取的文本)。

是否有一种方法可以使用JS定位这些图像并将其仅隐藏在移动设备上?我们不想隐藏所有图像-仅隐藏某些纵横比内的某些横幅图像。例如所有高度在100-150之间,宽度在800-1200之间的图片?

编辑:以下一些模型可以更好地说明问题:

Desktop Mockup

Mobile Mockup

如您所见,横幅按预期在桌面上呈现。在移动设备上,图像横幅文字太小而无法阅读。我想从手机中删除图像横幅,但不能仅通过CSS定位横幅,因为它也会影响其他图像。

我曾考虑过尝试以一定的宽高比(高度介于100-150之间,宽度介于800-1200之间)定位图像并通过JS隐藏它们,但到目前为止还没有奏效。我也尝试过使用以下脚本(针对确切的尺寸),但是没有运气:

 $('img').each(function() {
    'use strict';
    var img = $(this);

    if (img.width() === 600 && img.height() === 120) {
      img.hide();
    }
  });

谢谢!

1 个答案:

答案 0 :(得分:0)

如果要定位设备的宽度和高度,则可以使用CSS media query来实现。在here中可以找到类似的帖子。

编辑:以上答案与问题无关。