更改图像大小Javascript取决于屏幕大小

Question

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

我想运行一个javascript，当屏幕高度超过一定大小时调整图像大小。 （可以说是1000 px）

我找到的最好的代码就是这个

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

然而，当我用宽度替换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媒体查询根据屏幕大小选择图像。