1
私はdivの背景として巨大なイメージを使用します。この画像は、アスペクト比を維持しながらコンテナが許容する最大サイズで1回だけ表示する必要があります。画像は任意のアスペクト比を持つことができます。コンテナのサイズはサイズ変更可能で、アスペクト比も任意です。私は、背景画像と共にどんどん小さくなる8×8テーブルのレイアウトを必要とする画像「オーバー」テーブルまたはdivの高さと幅を背景イメージのサイズに調整しました
background-size:contain;
background-repeat:no-repeat;
background-position: center center;
width:100%;
height:100%;
background-image: url("path/to/img");
であることを達成するために管理しました。
私のjsfiddleの例では、正しく動作しているイメージ（出力ウィンドウのサイズを変更してみてください）がありますが、テーブルを常にそのイメージの上に直接スケーリングする方法はありません（Ideaは、この問題のCSS/HTMLのオプションはありません場合は、特定の画像上のスポット、どんなにサイズ、画像アスペクト比、コンテナのアスペクト比、...）
https://jsfiddle.net/15uovq7L/4/
、jQueryの/ JavaScriptのソリューションを適用することが可能です。
です。ここにplunkrがあります：https://plnkr.co/edit/gM2amcTOWa9Abc91imS2?p=preview – Spluf
jQueryを使って可能なことを考えました。私はその例を上に行きました、そして私は私の問題のためにそれを使うことができると思います。誰かが純粋なCSSソリューションを思い付くことができるなら、私はそれに着くつもりです。ありがとう！ – McCuz
純粋なCSSソリューションは、画像の高さに合わせてテーブルの高さを変更する必要があるためほとんど不可能に思えますが、実際には、画像がレンダリングされる前に画像の高さを知ることができません。 'それは予測不可能なプロパティです。私は恐れています。この場合、JavascriptやJQueryの助けが必要です。 –