0

私は次のセットアップを持っています

<div id="outerDiv" style="width:100%;">
  <div id="innerDiv">
    <center> 
        <a href="http:/..." title="..">
            <img src="http://...jpg" width="800" height="xxx" alt=".."> 
        </a> 
    </center>
  </div>
<div>

outerDiv の幅は、ブラウザーのビューポートに基づいて変更できます。含まれている画像の幅 (この例では 800) をオーバーライドするように、スタイル属性を使用するだけで innerDiv の幅を制限する方法はありますか。現在、画像はビューポートを超えて広がっており、div/ブラウザーで画像を内側の div サイズに縮小したいと考えています。

次のようなものを探しています：

<div id="outerDiv" style="width:100%;">
  <div id="innerDiv" style="attribute:xxx;" or something similar>
    <center> 
        <a href="http:/..." title="..">
            <img src="http://...jpg" width="800" height="xxx" alt=".."> 
        </a> 
    </center>
  </div>
<div>

注意してください: innerDiv は、たとえば格納されたパラメーターからの「変数」データをレンダリングしています。innerDiv のスタイルのみを制御して、innerHtml の「center」や「width」などが、outerDiv の設定を超えないようにします。外部 div で「max-width」を使用しようとしましたが、うまくいかなかったようです (私は html/css の専門家ではないため、間違って使用した可能性があります)。

ご協力ありがとうございました。

4

3 に答える 3

2

max-widthプロパティはあなたを助けることができます。

widthタグから属性を削除しimg、追加のcssコードを記述します。

<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
于 2012-09-01T14:33:55.753 に答える
0

ComFreak には完全な答えがあります。

center タグを削除し、代わりに css を追加します。また、特定のサイズの画像のみをターゲットにする場合は、その画像に id を追加します。

  #innerDiv {
       max-width:800px;
       margin:0 auto;}

  img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
       width:100%;
       height:0 auto;}

これはそれを処理する必要があります。css をヘッダーのスタイル タグに配置するか、別の css ファイルに配置することをお勧めします。

于 2012-09-01T14:42:35.353 に答える
0

中央タグを使用しないでください。それは間違いなく時代遅れです。代わりに margin: 0 auto; を使用してください。これにより、コンテンツが中央に配置されます。そして、innerDiv id に max-width プロパティを使用します。これは素晴らしい参照元です。http://www.w3schools.com/cssref/pr_dim_max-width.asp

于 2012-09-01T16:28:05.723 に答える