4

HTML構造の次の部分があります（簡単にするために終了タグは省略され、インデントはネストされたタグを表します）：

...
- <div class="main-content-wrapper">
  - <div class="item-image-wrapper">
    - <img class="item-image fit">
  - <div class="item-text">
    - <h2 id="itemTitle">
    - <p id="itemContent">

次のCSSで

.itemdetailpage section[role=main] article .main-content-wrapper {
    display: -ms-grid;
    -ms-grid-rows: auto auto;
    width: 100%;
    height: 100%;
}

.itemdetailpage section[role=main] article .item-image-wrapper {
    -ms-grid-row: 1;
    width: 100%;
    height: 100%;
}

.itemdetailpage section[role=main] article .item-image {
    margin-top: 0px;
    margin-left: 0px;
}

.itemdetailpage section[role=main] article .item-image.fit {
    /* Fit image to page size */
    max-width: 100%; 
    max-height: 100%;
}

.itemdetailpage section[role=main] article .item-text {
    -ms-grid-row: 2;
    margin-right: 5px;
}

目標は、IMG がメイン コンテンツの許容範囲を超えないようにすること (および幅が広がらないこと) です。つまり、メイン コンテンツ スペースよりも大きい場合は収まり、小さい場合は元のサイズのままになります。テキストは画像の下に流れるだけでなく、スクロールせずに見える範囲の下にも表示できますが、問題ありません。これは、JS コードなし、CSS のみで発生するはずです。

商品テキストが画像より狭い場合は大丈夫です。画像ラッパーは画像よりも数ピクセル高くなっています。理由はわかりませんが、見た目は問題ありません。

ここで見られる問題は、同時に、画像が使用可能な高さよりも高く、アイテムのテキストが画像よりも幅が広い場合です (特にアイテムのタイトル)。この場合、イメージ ラッパーはコンテナーよりも高くなり、イメージに従います。たとえば.main-content-wrapper、900px の (正しい) 高さを受け取りますが、高さは 1024px で、item-image-wrapper画像は高さ 1024px (自然な高さ) です。

この 100% DIV の高さが何度も出てきたことを知っており、答えを探しましたが、このケースに適した答えを見つけることができませんでした。

編集：

このSitePoint リファレンスを見つけました。「パーセンテージ値は ... の高さを参照する」という段落です。このルールについて何か知っている人はいますか?

4

3 に答える 3

1

特定の状況でこれを実現するためにできることの1つは、介在するすべての要素に追加width: 100%し、画像が使用可能なスペースをすべて占有する場合は、含まれているブロックから伸びるテキストに依存することです。height: 100%これは、拡張テキスト用のスペースを確保するためにページ上に他のものを取得するのが非常に難しいため、すべての状況で機能するわけではありませんが、他に何も含まれていないバニラHTMLページでは機能し、このjsFiddle： http ://jsfiddle.net/t6LvY/2/のように、テキストコンテンツの最後にfloat要素を配置し、そのテキストコンテンツの後に来る必要がある任意の場所にクリア要素を配置することによる他のいくつかの状況

ただし、設計が複雑になるにつれて、これは厄介になる可能性があります。画像の最大高さをウィンドウのサイズ変更時にウィンドウの高さに設定するには、JavaScriptを少し使用する方がよいでしょう。

于 2012-06-03T00:45:42.887 に答える
0

画像クラスから max-height を削除する必要があると思います max-width:100% は、その画像を画像の親コンテナーに合わせるのに十分です。これがあなたを助けるかどうかはわかりません。

于 2012-06-02T17:52:28.557 に答える
0

私自身が提案した (悲しい) 答え: DIV のパーセンテージの高さを維持し、純粋な CSS (つまり JS なし) に固執する場合、目標は達成できません。

W3Cの仕様では、この場合のパーセンテージは基本的に無視されると記載されています (テキスト「The percentage is Calculated with...」を探してください)。また、Internet Explorer のドキュメント(私が使用しているブラウザー) にも、基本的に同じことが書かれています (「* 含まれているブロックの高さの場合...*」というテキストを探します)。

于 2012-06-02T20:51:14.830 に答える