Q&A
質問の編集を拝読。
その条件では難しいのではないかと思いました。
background-size: contain;
を使えば画像サイズが領域より大きい場合に自動で全体が見えるよう調整されますが、
画像が小さい場合に拡大されてしまいます。
拡大は不要で縮小のみしたいのですが、 background-image を使う場合に実現可能でしょうか？
条件：
- JSは使用不可
- imgタグに変更不可
- サーバーが生成するHTML等の変更不可
既存画面に対してCSSのみ変更（既存のものに追加）可能です。
画像表示にback-ground-imageが使われるケースはよく見るので表示範囲に収まる形で表示するというありがちな表示方法は実現できる手段があるかと思い質問しましたが、難しいのですね。それがわかっただけでも良かったです。ありがとうございました。
回答1件
0
background-size は max() や min() を許容するので 最大サイズと 可変サイズを合わせて min() すれば いいのではないでしょうか？（なんなら calc() で計算してもいいかもしれません。
例えばこう
このコードだと 幅が 100% か 500px の 小さい方なので 500px 未満になると その幅に合わせて小さくなります。高さは auto なので 幅に 比率を合わせます
css
1:root { 2 background-image: url(https://picsum.photos/id/0/300/300); 3 background-repeat: no-repeat; 4 background-position: center center; 5 background-size: min(100%, 500px) auto; 6}
参考
- 上記の対応をした playground
- background-size - CSS: カスケーディングスタイルシート | MDN
- min() - CSS: カスケーディングスタイルシート | MDN
- calc() - CSS: カスケーディングスタイルシート | MDN
追伸
background-size の仕様を確認したら background-size: 数値 は background-size: 数値 auto の省略形だそうで、 上記の例だと background-size: min(100%, 500px); でも全く同じ動作しますね。
In the following example, the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio:
css
1div { 2 background-image: url(image2.png); 3 background-repeat: repeat; /* default */ 4 background-size: 3em } /* = '3em auto' */
投稿2024/11/19 23:40
編集2024/11/20 01:35
総合スコア453
横からすみません。
その場合、要素が横長だった場合、上下が見切れることになると思いますので、contain と違う動作になりそうです。
ラッパー要素を置いて @container (orientation: portrait) のようにコンテナクエリで場合分けするなどの対応が必要かもしれません。
（それなら image 要素を置いて object-fit: scale-down でいいじゃん、ということになりそうで、問題の解決にならなさそうですが）
その方法場合500pxは画像のサイズですよね？
画像サイズはユーザーが投稿するものでして、事前にはわからず画像次第で可変です。
サイズを取得するにはJSが必要ですが今回はJSが使えない前提なので今回の方法には使えなそうです。
ありがとうございました。
画像のサイズは 300px x 300px ですが 500px に拡大して使っています
たびたび横からすみません。
> snlqjgdq5r さん
> 画像サイズはユーザーが投稿するものでして、事前にはわからず画像次第で可変です。
ということは、サーバ側のコードによってHTMLに画像ファイルのパスが動的に出力されるのでしょうから、同様にサーバ側で内在サイズを取得し動的にHTMLに埋め込めばいいのではないでしょうか。
<div style="--image-width:{{image.width}}">のような形で。
@Lhankor_Mhy
つまりこういうことですね。 https://livecodes.io/?x=id/jf2n8b4kprg
質問の条件に記載していなくて申し訳ないのですがサーバーサイドは一切触れることはできず、CSSによる簡易なカスタムのみが可能です。既存画面に対してCSSを差し込めるくらいのため、JSやimgタグ等も使えない形です。
あなたの回答
tips
プレビュー
