問題タブ [responsive-images]
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.
html - srcset と size を使用する場合、幅と高さの属性は何をしますか?
srcsetおよび属性を使用している場合でも、フォールバックとして属性sizesを指定すると便利です。src同様に、古いブラウザーでもwidthandheight属性が指定されていればそれを利用していたと思います。しかし、最新のブラウザはどうですか?
例えば：
この例では、最新のブラウザに使用する属性widthと属性はありますか?height
html - `background-size` CSS プロパティが html![]()
タグで機能しない
画像ソースを CSSbackground-imageプロパティとして設定すると問題なく動作しますが、HTML 経由で画像ソースを設定すると完全に機能しなくなります。なんで？
この画像を幅と高さの組み合わせに関係なく正しく表示するには、CSS からソースを宣言する必要がありますか?
編集：質問の反対票が何のためにあるのかわかりません...高さと幅の両方を個別に変更しても元のアスペクト比を維持できるように、画像を自動的にトリミングできるかどうか知りたかっただけです。これは、背景画像を使用する場合は問題なく機能しますが、コンテンツでは明らかに機能しません。いずれにせよ、私は今答えを得ました。
css - レスポンシブヘッダーのスペースを均等にする方法は?
ホームページに大きなヘッダー画像があります。モバイル版では画像をレスポンシブにすることはできましたが、ボタンと下のテキストの間のスペースを管理するのが困難です。スペースは、すべてのモバイル画面で同じではありません。場合によってはスペースが大きくなります。
これを修正する方法は？モバイル版はこちらからご覧いただけます
CSS（モバイル版の画像ヘッダー用CSSの一つ）
html - 相対位置と絶対位置。ロゴを隅に移動させる
そのような状況があるとします：
いくつかの主要な部分を見ることができます:
- パネル（ボーダーレッド）
- 画像
- ロゴ
- タイトル
そして、私はこのセットアップが必要です:
だから、ロゴは立ち上がる必要があります。absolute通常、画像とロゴを作成しようとするたびにrelative、右に浮かせて動作しますが、画像の下にもあるタイトルを失います。
また、タイトルを相対的にして、値を付けて上からプッシュすることはできません。これは、画像がレスポンシブで、height.
これが私が使用しているコードです。
image - レイジーサイズによるピクチャフィルとレイジーローディング
lazysizesとpicturefillを使用して遅延読み込みを機能させようとしています。
基本的なイメージを使用するだけで、遅延読み込み自体が機能します。
Chrome のネットワーク タブを確認すると、赤い線の後に画像が読み込まれていることがわかります。すべて問題ありません。
ここで、レスポンシブ画像を含む要素を追加し、<picture>それも遅延してロードしようとしました:
残念ながら、この画像は遅延読み込みではなく、直接読み込まれます。
また、絵素画像で src を 1 つだけ使用してみましたが、違いはありません。
lazysizes doc によると、これを一緒に機能させることができるはずなので、細部が欠けているだけだと思いますか?
更新: Lazysizes と Picturefill は両方とも にロードされます<head>。