Question

我有一个菜单布局，如：

<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/但是形象仍然非常庞大，令人讨厌。

你能帮我解决调整大小问题吗？ here is a fiddle

或者我必须解决几个问题：

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

}

如果是，如何？

Answer 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;
 }
}

Answer 2

您的标记中没有图像，因此$('#logo img')将找不到任何内容。你使用CSS背景，你不能改变CSS背景图像的大小（至少我不知道如何做到这一点）。

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

另一种选择是使用实际的<img>代码并调整window.resize上的图片大小。我宁愿使用@media查询。

Answer 3

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

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

这应该有效。

根据移动版网页上的宽度大小调整菜单徽标大小

3 个答案: