問題タブ [fluid-images]

こんにちは、空白の場所を残さずにさまざまなスペースに収まるように、さまざまなサイズの複数の画像をリストできる写真表示を作成しようとしています。私が達成しようとしていることの例は、このサイトで見ることができます: http://www.morgannorman.com/

これが私のhtmlのプレビューと、画像の設定方法です。

<div class="feature-list"> <div class="feat" id="one"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic6.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic5.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> </div> </div>

そして私のCSS：

流動的なレイアウトで div とネストされた img を使用して基本的なヘッダーを作成しています。私はこれについて少し錆びており、div にネストされた画像が親 div よりも小さくなるポイントにスケーリングせずにスケーリングする方法を理解することはできません。

編集：画像を圧迫するため、min-heightの使用が機能しないことを示すコードペンリンクを更新しました

HTML:

CSS:

そして、何が起こっているのかを簡単に説明します。

そして、私がしたいことの例：

編集:ここの画像は圧縮されていないことに注意してください。これは、画像の最小高さがその親 div と同じになるように設定した場合に発生することです。しかし、オーバーフローは隠されています。また、画像が切り取られても気にしないこともわかります。

どんな助けでも感謝します。

メニューの背景画像を含むwidth: 656pxとの画像があります。height: 60px各メニュー ボタンにはファイル内の既知の位置があるため、私のメニュー ›media‹ のメニュー ボタンは (188x, 0y), 104w, 30h です。

各liには独自の一意の ID があります。

パーセンテージとして値が必要な場合（それは可能な解決策かもしれませんが、まだ理解できないため）、それは（28.659％x、0％y）、15.854％w、ファイルの50％hです。

実際のメニューの高さは 1em または 2em などです。

だから、CSSで何とか達成しようとしていること：

• 李の高さを保ちます。
• 縦横比を保持 (>media‹ の場合は 3.466:1)
• それぞれ<li>の幅を高さの 3.466 倍にする
• ソースからの背景で塗りつぶし、それに応じて背景を伸ばしたり縮めたりします。

まあ、ある種の疑似コードでは、これは簡単です:

しかし、CSS でそれを行うにはどうすればよいでしょうか。

流動的な幅のコンテナーに画像の行があり、画像間に固定幅のスペースがあります。コンテナが縮小した場合、画像は流動的にサイズ変更され、コンテナの幅全体に収まる必要があります。

このために、空白を使用しています: nowrap; および表示: テーブル。コンテナとディスプレイ: table-cell; その子に。

ただし、画像はさまざまな要因でスケーリングされているように見えるため、非常に小さい画像もあれば、わずかに小さい画像もあります。比例してスケーリングする必要がありますが、方法がわかりません。どんな助けでも大歓迎です！

HTML:

CSS:

ライブ デモについては、このペンを参照してください: http://codepen.io/anon/pen/PZPjop

ページ幅が 50% の列にさまざまなサイズの画像が表示されるシナリオがあります。

列幅が画像のネイティブ幅を超える大きな画面では、画像は流動的でありながらネイティブ幅にレンダリングする必要があります。

画像のサイズはさまざまです (つまり、横向きと縦向き)。そのため、img 要素に単一の幅または高さを適用することはできません。親要素を、表示される最大の画像幅に一致する最大幅に制限することはできますが、幅が狭い画像は、流動的になると幅が広すぎます。

基本的な構造は次のとおりです。

この CSS では:

方向を示すデータ属性を img 要素に追加し、これを使用して max-width を適用することはできますが、これにはサイト エディターの作業が増えるため、回避する必要があります。したがって、私は CSS のみの解決策を探していますが、行き詰まっています。

何か案は？

Web ページの 1 つに流動的な画像の背景を実装しようとしています。Chrome では問題なく動作しますが、Firefox では動作しません。ブラウザウィンドウのサイズが変更されると、比例してサイズが変更される2つの正方形のpng画像があります。

html は次のとおりです。

CSS は次のとおりです。

問題は、Firefox で出力が表示されないことです。使用しない場合display:flex、Firefox で 2 つの四角が表示されますが、私の Web ページでは flexbox を使用する必要があるため、ドロップできません。

Firefox で動作しない理由を知っている人はいますか?

Chrome バージョンのスクリーンショットは次のとおりです: 55.0.2883.87 m

Firefox バージョンのスクリーンショットは次のとおりです: 50.1.0

こんにちは、ウェブサイトの画面の高さと幅に基づいた流動的なコンテナがあります。画面サイズに基づいて任意の方向に拡大するため、常に画像でコンテナを埋めたいと思います。使用される画像は、サイズと縦横比が異なります。

以下のhtmlとcssを試してみました。

max-height と max-width がない場合、画像がコンテナーよりも小さい場合はうまく機能しますが、画像が自然なサイズで出てきてトリミングされるため、画像が大きくなる場合は機能しません。

jsfiddle の例

純粋なcssだけでこのタスクを達成することは可能ですか?

更新 また、背景画像を解決策として使用することを避け、可能であればimgタグのプログラミングを避けるために、domにimgタグを配置するだけでこれが可能かどうかを確認したいと思います.