Question

我不想使用窗口宽度来更改我的img标签，而是希望使用随媒体查询更改的其他元素高度。例如：页面加载在完整大小（非移动或平板电脑）监视器上。当窗口缩小并达到800px的断点时，css表会发生变化，而名为.content的div标签（在我下面的代码中）的高度会变为267px。现在我希望jQuery在.content＆lt; 287时更改图像标记的.attr，然后在下一个断点（＆lt; 135）再次更改。

我尽力编写代码，但没有运气。我希望这是有道理的，并且很容易解决。我对jQuery很新，但我肯定是在学习。预先感谢您的任何帮助。以下是小提琴中的代码：http://jsfiddle.net/Margate/ze2GR/

        <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Responsive Test</title>
  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">
      $(document).ready(function(){
      var n = $(".content").height();
      if(n < 268){
      $("#pictureOne").prop("src","medium.jpg").width(400).height(267);

      }else if (n < 135){
      $("#pictureOne").prop("src","small.jpg").width(200).height(134);
      }
      });
  </script>

  <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:5000px)" href="large.css" />
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:601px) and (max-width:800px)" href="medium.css" />
  <link rel="stylesheet" type="text/css" media="only screen and (min-width:10px) and (max-width:600px)" href="small.css" />
  <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>

<body>

 <div class="content">
    <img id="pictureOne" src="large.jpg" width="700" height="467">
 </div>

</body>
</html>

以下是外部css表：

        Small
.content {position: relative; margin: 0px auto; width: 200px; height: 134px; border: 1px solid black;}

Medium
.content {position: relative; margin: 0px auto; width: 400px; height: 267px; border: 1px solid black;}

Large
.content {position: relative; margin: 0px auto; width: 700px; height: 467px; border: 1px solid black;}

Answer 1

jQuery的width()和height()是函数，可以像这样使用：

$(document).ready(function(){
      var n = $(".content").height();
      if (n < 268){
          $("#pictureOne").prop("src","medium.jpg").width(400).height(267);

      }else if (n < 135) {
          $("#pictureOne").prop("src","medium.jpg").width(200).height(134)
      } 
});

请注意，您在条件中也缺少括号，并且您应该使用prop()更改属性，例如src。

Answer 2

jQuery .height（）是一个方法，你需要调用它才能获得高度。

所以

var n = $(".content").height();

Answer 3

尝试此解决方案。

<强> CSS

/* Large Media Query */
.content {position: relative; margin: 0px auto; width: 700px; height: 467px; border: 1px solid black;}

@media only screen and (max-width: 500px) {
    /* Small Media Query */
    .content {height: 267px;}
}

@media only screen and (max-width: 300px) {
    /* Small Media Query */
    .content {height: 134px;}
}

<强> HTML

<div class="content">
    <img id="pictureOne" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/check_alt-48.png" >
 </div>

<强>的jQuery

function setLayout(){

      var n = $(".content").height(),
            url = 'https://cdn3.iconfinder.com/data/icons/iconic-1/32/';
    switch(n){
        case 134:
            $("#pictureOne").attr("src", url+"check_alt-24.png");
            break;
        case 267:
            $("#pictureOne").attr("src", url+"check_alt-32.png");
            break;
        default:
            $("#pictureOne").attr("src", url+"check_alt-48.png");
    }

};

$(document).on('resize ready', function(){ setLayout() });
$(window).on('resize', function(){ setLayout() });

<强> Fiddle Demo

使用jQuery更改img attr

3 个答案: