0

我有一个菜单布局，如：

<body>
<header id="wrapper">
  <!-- start header -->
  <div class="container clearfix">
    <h1 id="logo" class="alignleft"> <a href="index.html">index.html</a> </h1>
    <nav class="alignright">
      <ul id="nav">

        <li><a href="#test">111111</a></li>

        <li><a href="#">22222</a></li>
        <li><a href="#">33333</a></li>
        <li><a href="contact.html">Contact</a></li>

      </ul>
    </nav>
    <div class="clear"></div>
  </div>
</header>

    <div class="section ancor">
  <div class="first-heading">
    <div class="clearfix">
      </div>   
      </div>   
        </div>   

</body>

我想为移动版调整大小为 450x159 的徽标图像

所以我尝试了：

$(document).ready(function() {
     $width = $('#logo').width();
     $('#logo img').css({
        'max-width' : $width , 'height' : 'auto'
          });
     });

但它不起作用，也许我错过了一些我试图通过 http://www.mobilephoneemulator.com/查看结果的东西，但图像仍然很大并且让事情变得讨厌。

你能帮我解决调整大小的问题吗？ 这是一个小提琴

还是我必须用几个来解决它：

@media only screen and (max-width: XXXpx) {

}

如果是这样，怎么办？

4

3 回答 3

1

您不需要 javascript 来执行此操作。您需要将徽标作为附加到 div 的背景图像加载。根据活动的视口大小，您可以加载不同的背景图像。

<div id="logo"></div>

/* default styles */
#logo {
 background: url(logo.png) 0 0 no-repeat;
 display: block;
 height: 50px;
 width: 100px;
}

/* mobile styles */
@media only screen and (max-width: XXXpx) {

 #logo {
  background: url(logo-small.png) 0 0 no-repeat;
  height: 25px;
  width: 50px;
 }
}
于 2013-03-25T06:33:20.353 回答
0

您的标记中没有图像，因此$('#logo img')什么也找不到。您使用 CSS 背景，并且无法从 CSS 更改背景图像的大小（至少我不知道该怎么做）。

一种选择是为不同的分辨率使用不同的图像文件并利用@media 查询。

另一种选择是使用实际<img>标签并在window.resize. 我宁愿使用@media 查询。

于 2013-03-25T04:56:49.597 回答
0

这是我用于所有移动网站的内容：

img
{
    max-width: 100%;
    max-height: 100%;
}

那应该行得通。

于 2013-03-25T05:08:29.780 回答