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から背景画像のサイズを変更することはできません（少なくともこれを行う方法はわかりません）。

1つのオプションは、さまざまな解像度のさまざまな画像ファイルを使用し、@mediaクエリを利用することです。

もう1つのオプションは、実際の<img>タグを使用して、上の画像のサイズを変更することwindow.resizeです。むしろ@mediaクエリを使用したいと思います。

于 2013-03-25T04:56:49.597 に答える
0

これは、私のすべてのモバイルサイトで使用しているものです。

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

それはうまくいくはずです。

于 2013-03-25T05:08:29.780 に答える