Question

我想要的是在窗口较小时更改图像。

例如，当窗口<900px时，它将是一个图像。但是当寡妇> 900时，它将是一个不同的形象。

我无法弄清楚如何使用不同的窗口大小来做这件事？

Answer 1

您可以使用以下css媒体查询：

@media (max-width:900px) {
   #targetElement { background-image: url('...') }
}

@media (min-width:901px) {
   #targetElement { background-image: url('...') }
}

@media

Answer 2

你可以尝试这个jquery：

var width = $(window).width(); 
if (width >= 900) {
    //do something
} else {
    //do something else
}

Answer 3

您可以使用媒体查询，并为所需宽度设置display：none。

<img src="http://*" class="image1"></img>

@media (max-width:900px) { .image1 { display:none } }

Answer 4

您可以通过CSS执行以下操作

 @media screen and (max-width: 900px) {
 #id{/*Your CSS here */} }

Answer 5

您还将使用jquery执行此操作： -

var width = $(window).width();

if(width > 900){
     $('#img-id').attr('src','path/to/image');
}else{
    $('#img-id').attr('src','path/to/image');
}

Answer 6

您需要的是一个事件监听器。每次窗口调整大小时，让jQuery检查宽度。如果高于/低于某个阈值，请调整图像。像这样：

$(window).resize(function() {
    var width = $(window).width();
    $("#width-num").html(width);

    if(width > 500) {
        $("#img-change").attr("src", img2);
    } else {
        $("#img-change").attr("src", img1);
    }   
});

See fiddle for example

Answer 7

你可以通过jQuery

来做到这一点

$(window).resize(function() { 
  if($(window).width() > 900){
   $('Your target div').html('<img src="Ur Image" />');
  } 
  else { 
  $('Your target div').html('<img src="Ur Different Image" />'); 
  } 
});

我需要根据窗口宽度更改img

7 个答案: