1

画像が読み込まれるときにブラウザが画面をリフローさせずに、2 つのレスポンシブ画像を表​​示したい。私は現在、この回答の修正版を使用しています：responsive-design, image, how to set width/height to avoid reflow on image-load

単一のレスポンシブ イメージのフィドルは次のとおりです: https://jsfiddle.net/hxraak4u/

HTML

<div class="image-wrapper" style="max-width: 608px; ">
    <div style="padding-bottom: 49.34%; "> <!-- Height / Width -->
        <img src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" style="max-height: 300px;" />
    </div>
</div>

CSS

.image-wrapper {
    margin: 15px auto;
    page-break-inside: avoid;
}
.image-wrapper div {
    position: relative;
    height: 0;
    overflow: hidden;
}
.image-wrapper div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

注: いくつかのインライン スタイルを使用しているのは、Razor を使用して画像の HTML を作成し、幅、高さ、高さ/幅 (下のパディング %) を設定しているためです。

現在、既に作業しているものを保持しながら、2 つの異なる高さの画像を並べて表示しようとしています。具体的には：

  • 並べて表示する異なる高さの画像
  • 画像は親 div の中央に配置されます
  • 画像が 100% を超えて表示されない
  • ディスプレイの幅が減少して 2 つの画像のいずれかの幅よりも小さくなる場合は、これらの 2 つの画像を垂直方向に積み重ねます。
  • 表示がさらに縮小する場合は、幅と高さの比率を維持しながら、必要に応じて画像の幅を縮小します - 標準のレスポンシブ UI
  • 印刷するときは、画像が 1 行に 2 つある場合も 1 つある場合も、画像をページに分割しないでください。
  • HTML がロードされるとき、ディスプレイの幅と幅/高さの比率に基づいて各画像の垂直方向のスペースを予約します - リフローを防ぎます
4

1 に答える 1

1

デモ: jsFiddle

Alt:フルスクリーン

HTML/CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html { box-sizing: border-box; font: 700 16px/1.5 Consolas; }

*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }

.flexWrapper { margin: 2em auto; max-width: 38em; page-break-inside: avoid; display: flex; flex-direction: row; justify-content: center; }

.flex { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; overflow: none; outline: 3px solid red; flex: 0 1 auto; }

.exampleImg0, .exampleImg1 { max-height: 20em; width: 100%; height: 100%; display: block; }

@media screen and (max-width:37em) {
  .flexWrapper { flex-direction: column; align-items: center; }
}
</style>
</head>

<body>
<div class="flexWrapper">
  <div class="flex">
    <img class="exampleImg0" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" />
  </div>
  <div class="flex">
    <img class="exampleImg1" src="http://placehold.it/240x320/fff/000.png&text=240x320" />
  </div>
</div>
</body>
</html>

次のような基本的な変更が行われました。

  • box-sizing

  • margin、padding、およびのリセットborder

  • font-sizeで宣言されていますroot

    測定目的、ポジショニングなどのためにすべてがどのように動作するかを調整するためだけに...

要素の名前を変更しました (物事をより適切に関連付けるために、奇妙な名前を使用する必要があります)

  • .image-wrapper………….flexWrapper

  • .image-wrapper``div..........flex

  • .image-wrapper``div img... .exampleImg0(元の画像) と .exampleImg1(追加された画像)

簡単な説明:

  • .flexWrapper``{ display: flex; flex-direction: row; justify-content: center;...これを参照してください`

  • .flex { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; overflow: none;...これを参照してください ... outline: 3px solid red;flex-item をよりよく確認するためだけに... ...flex: 0 1 auto; }これにより、imgs をラップする 2 つの div (.flex) が、確立した基準内でほとんど動作するようになります。

  • .exampleImg0, .exampleImg1 { max-height: 20em; width: 100%; height: 100%; display: block; }これらのプロパティは、imgs をその親内で中央に配置.flexし、応答比率を維持するのに役立ちます。

  • 単純なメディアクエリ... @media screen and (max-width:37em) { .flexWrapper { flex-direction: column; align-items: center; } }...画像が縮小するたびに、画像は互いに積み重なっていきます。

于 2015-08-04T05:14:07.490 に答える