問題タブ [background-size]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - div サイズを背景画像に合わせる
背景画像のサイズに合わせて div のサイズ (幅と高さの両方) を設定しようとしていますが、うまくいきません。レスポンシブ Web サイトを扱っているため、背景画像のサイズはパーセンテージで指定する必要があります。小さい画面では、背景が完全に表示され (幅は狭くなりますが、比例します)、画像を含む div はそのサイズに従う必要があります。
auto 100%、cover、contain など、背景サイズのさまざまな値を試しましたが、何もうまくいきませんでした。これについても同様の質問があります: div を背景画像のサイズにスケーリングしますが、私の問題も解決しませんでした。
誰かがそれを行う方法を知っているなら、私は本当に感謝しています。
編集: 動作を示すためにフィドルを作成しました: http://jsfiddle.net/osv1v9re/5/ この行は、背景画像を非常に小さくしているものです:
しかし、それが削除された場合、背景は適切な幅を埋めますが、高さは埋めません。
css - CSSで背景画像を配置する
WordPressサイトを構築しています。ホームページで、テーマメーカーが同じクラス名を付けたスライダーの下の他の div に影響を与えずにボールを配置しようとしています。私がやりたいのは、ボールを小さくして、文章の下に置くことです。テーマでは、その画像にクラスを割り当てることができません。これは私が試したものですが、その行の他の画像に影響します。誰か助けてくれませんか？私は最初の子を使用できるかもしれないと考えていますが、よくわかりません。ありがとう！
html - table-cell 内に background-image を含むこの div がまったく表示されないのはなぜですか?
.col-left-bg-imageまったく表示されないのはなぜですか？
内部にコンテンツがないため、表示されていないことに気付きました。...だから私はそれに入れてそれを与えてチェックしましたbackground-size:100% 100%（最初はそうでしたauto 100%）。しかし、結果として、 を持つ divが表示されますが、親 (つまり) の 100% のbackground-imagea はかかりません:s JSFiddle hereheight.col-left
また、 withimgの代わりにインライン要素を使用しようとしましたが、それは惨事につながります。ここで JSFiddle。divbackground-image
html - background-attachment を使用しない背景画像のスケーリング: 修正済み?
背景画像を完全にレスポンシブにするための最良の方法を見つけようとしています-これまでのところ、私が理解できる最善の方法は、ほとんどの人が提案する傾向があるように、background-size: cover を使用することですが、 background-attachment: fixedを使用します。画面のサイズが変更されると、画像の縦横比が縮小されます。それ以外の場合は、元の縦横比が保持され、まったく拡大縮小されません。background-size のみを使用: cover はイメージを引き伸ばしてコンテナー div を埋めますが、比率は自動的にスケーリングしません。
ただし、下にスクロールするときに画像の一部を非表示にする固定背景の効果は望んでおらず、それを background-attachment: scroll にすることを好みますが、それを機能させて拡大縮小することはできません。
だから私の質問は: background-attachment: fixed を使用せずに背景画像を画面サイズに合わせて自動的に拡大縮小する方法はありますか?
現時点で私が持っているものについては、私の JSFiddle を参照してください: https://jsfiddle.net/uhoL5d5w/2/
（そして、はい、さまざまな画面サイズに最適化された画像を提供するために、ある時点でメディアクエリを使用する必要があることも認識しています）
私の現在のコードは次のようになります。
image - ビューポートの高さ、スライダー css 内で画像を集中化
現在取り組んでいるホームページにスライダーがあります。画面の幅全体を占める完全なビューポートの高さを達成しようとしています。
現在これを達成できる唯一の方法は、画像を引き伸ばすか、画像を中央に配置しないことです。
画像は、水平方向と垂直方向のほぼ中央に配置する必要があります。これにより、顧客はブラウザのどの幅でも画像の中心を見ることができ、画像が不均衡に引き伸ばされることはありません。
background-size: cover; を試しました。背景画像ではないため、要素で成功しませんでした。コンテナーには現在 100vh がありますが、幅が問題です。
この問題はhttp://joeybox.info/にあります。画像の上のメニューとロゴで、100ビューポートの高さが「折り目」の下にあることに気づきましたが、cssを理解したら、最終的に画像の上にロゴとメニューを配置しています。
スタック オーバーフロー フォーラム内で見つかった多くの解決策を試しましたが、私のシナリオではうまくいきません。
間違ったコードを削除した後の私の現在の CSS は次のとおりです。
html=