javascript - 根据屏幕尺寸改变图像尺寸Javascript

Question

我正在使用 bootstrap，由于某种原因，这意味着每当我尝试 @media (min-height: 1000px) 时，图像类都没有响应。

我想运行一个 JavaScript，当屏幕高度超过特定大小时调整图像大小。 (假设 1000 像素)

我发现的最好的代码是这个

<script>
    $(function() {
        if ($(window).height() >= 710) {
            $("img").each(function() {
                $(this).attr("src", $(this).attr("src").replace("logo1.png", "logo2.png"));
            });
        }
    });
</script>

但是，当我用 width 替换 src 并将 logo1.png 和 logo2.png 的相应值更改为 500 和 800 时，什么也没有发生。

非常感谢任何使用 Javascript 的指针。

我在 CSS 中尝试过这个

@media screen and (max-width: 980px) and (min-height: 1000px) {
 .iphonegangster {
  min-width: 950px;
  height: auto;
 }

Answer 1

您可以使用带有图像背景的 CSS 媒体查询，而不是使用 JS。例如，<i role=image class=img1/> 。使用 CSS 媒体查询根据屏幕尺寸选择图像。