1

ems で設定されている関連テキストと同じ量にサイズ変更する必要があるテキストを含む画像のインスタンスが 2 つあります。1 つは前景画像としてのナビゲーション メニューのロゴタイプで、もう 1 つは背景画像と負のテキスト インデントという昔ながらの方法でフォントを置き換えた独自の見出しです。

少なくとも Firefox と Chrome では、高さに適切な em サイズを設定すると、正しい動作が得られます。遠近感の問題を避けるために幅を設定していません。

ただし、5.1.7 までの Safari では、画像が大きすぎて表示されません。ここでの解決に向けたステップについての提案や考えはありますか? IE はまだテストしていませんが、7、8、9 用の特定のスタイルを提供しています。

ユーザーがテキストのみをズームしている場合でも、サイズ変更が機能することをお勧めします。最終的な目的は、画像のテキストが実際のテキストと一致するため、テキストとまったく同じ量で画像のサイズを変更することです。

HTML5:

ul id="one" class="nav">
    <!--Logotype-->
    <li class="logo"> <a href="/">
      <h1><img src="http://bitly.com/YV6G0S"></h1>
      </a></li>
    <!-- endLogotype -->
    <li><a href="#">Text Link 2</a></li>
    <li><a href="#">Text Link 3</a></li>
  </ul>

CSS:

body {
    font: 81.25% Arial;
}
.nav {
    list-style: none;
    height: 100%;
}
.nav li {
    float: left;
    font-size: 2em;
}
.nav li a {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.5em 0.4em;
}
.nav li a h1 {
    display: inline-block;
    font-size: 1em;
    font-weight: normal;
}
.logo img {
    height: 1em;
}

Jsフィドル

jsfiddle-exampleの短縮バージョンを使用してコードを作り直して、例を更新しました。（結果を表示するために水平方向の部屋を作ります）目的をよりよく説明するために、グラフィックをどのように動作させたいかを説明します。フィドルでは、グラフィックは、高さ 26 ピクセルにカットされ、高さ 2em に設定されたテキストのスクリーン ダンプです。ルート em は通常 13px です。

この例では、グラフィックが Firefox で実際にサイズ変更されていることがわかります。これは期待できます。ただし、画像はテキストではないため、グラフィックを同じ場所に配置して兄弟テキスト リンクのように動作させるには、いくつかの調整を行う必要があります。

現実の世界では、グラフィックは同じサイズと外観ではなく、テキストに合わせてオフセットする必要があります。しかし、ページのサイズを変更すると、グラフィックはテキストのようにサイズ変更されます。

4

1 に答える 1

0

次のコードで画像のサイズを変更できます。

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

... または、画像の最大サイズが必要な場合は、次のようにコンテナーに入れます (上記の img 宣言を維持します)。

.container {
    max-width: 300px;
}
<div class="container">
    <img src="logo_115x39.png">
</div>

これは、コンテナーの最大幅が必要な高さと同じになるように簡単に変更できます。

更新:
質問が正しく理解できた場合は、画像の縦横比を計算して、高さの代わりに画像の最大幅を設定できます。以下の計算は、質問で言及した 5.46em で行われます。JSFiddle のデモを参照し、ウィンドウを縮小して画像が縮小されていることを確認してください。

.logo div {
    /* 
    115px / 39px = 2.948717948717949
    2.948717948717949 x 5.46em = 16.1em
    */
    max-width: 16.1em;
}
.logo img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 hack */
}

JSFiddle
http://jsfiddle.net/mKt3c/

于 2012-11-06T18:27:43.430 に答える