Q&A
bgも画像ですか？
imgとbgのサイズは縦横いくつですか？
画像のようなイメージで画像の背景に画像より縦が小さい帯をbackground-colorで敷く方法を探しています。
背景に高さの違うbgを敷く記述で良い方法はありますか？
※img＝画像 / bg＝background-colorで指定
※サイズ 画像（幅1000px×縦500px） / box（幅1000px×縦500px） / bg帯（幅100%×幅200px）
・画像の横幅を指定したいです。
・レスポンシブで画像の縦横比が変わらない、かつ背景の帯も縦横比固定は可能ですか？
・<div>のタグにimgの画像を入れたいです
仮で考えたのは下記です。こちらの記述では表示されませんでした。
<div class="test"> <img src="http://placehold.jp/150x150.png"> </div>.test {
margin: 0 auto;
overflow: hidden;
height: 0;
padding-top: 56.25%;
background: no-repeat,
background-size: contain;
background-position: center;
border: 1px solid;
}
どなたかわかる方いらっしゃいませんか？
「画像の縦横比を固定しながら」とありますが、「<div>の縦横比を固定に」ともあります。
縦横比を固定するものは二つあるのですか？
ご質問ありがとございます。下記回答になります。
＞bgも画像ですか？
bgはbackground-colorで設定したいです。
＞imgとbgのサイズは縦横いくつですか？
imgは縦横比のレスポンシブを想定していますので固定ではなく
仮に幅600/高さはautoで指定でしたいです。
＞縦横比を固定するものは二つあるのですか？
画像の通り、boxの縦横比を固定し、bgを中央に敷く（imgの高さより低く、幅は100%）
説明が難しく申し訳ございません。
宜しくお願い致します。
とすると、タイトルの「画像の縦横比を固定しながら」は間違いということですか？
ご質問ありがとございます。下記回答になります。
＞「画像の縦横比を固定しながら」は間違いということですか？
img縦横比は仮にboxというclassのタグに対して画像はレスポンシブで縦横比を固定
背景の幅はwidth:100%で画像の後ろの中央に帯のように敷くことは可能でしょうか。
もう回答してしまいましたが、つまり、boxと画像の両方で縦横比を固定したいということでしょうか？
「タグに対して画像はレスポンシブで縦横比を固定」というのがいまいち飲み込めないです。
（縦横比とは「タテに対してヨコの比」なので、タグに対しての縦横比となると……どういうことでしょうか？）
回答した後に気づきましたが、重複質問ではありませんか？
https://teratail.com/questions/348489
同じような質問を連投したくなる気持ちもわかるのですが、しかし、一般に同じ質問を複数立てることは嫌われています。
いくつか理由をあげます。
・他の質問で付けられた回答を知らずに同内容の回答を付けたり、他の質問ですでに解決したことを知らずに検討を続けたり、善意の回答者の労力が無駄になる。
・元質問の回答者へ不信感を表明しているように見えるので、回答者に強い不快感を与える可能性がある。
以上のように誤ったコミュニケーションになってしまう可能性があります。
誤ったコミュニケーションは問題解決を阻害するだけではなく、不毛な論争などで時間や労力を無駄にし、質問者と回答者と共に良いことはありません。
ですので、同じ内容で新規の質問を建てることはできるだけ避け、どうしても新しい質問を建てる場合には、ほかのユーザーが納得できそうな理由を挙げていただくことによって、よりよいコミュニケーションが構築できるのではないかと考えています。
また、teratailのガイドラインにも同じ質問を複数建てることは推奨されていませんので、質問をされる前にまずヘルプを一読されることをお勧めします。
https://teratail.com/help#posted-otherservice
以上、よいQ&Aサイトを構築していくためにご協力をお願いします。
ご回答ありがとうございました。
画像のイメージの通りなのですが、仮にboxというエリアがあるとして
中央に画像 ←レスポンシブで縦横比固定
その画像に背景に画像より縦が低いbg-colorで帯を敷く
というシンプルな形なのですが・・・説明が難しくすみません。
＞boxと画像の両方で縦横比を固定したいということでしょうか？
boxは仮に幅1000×縦600だとして仮に画像が幅500×縦600だとします。
そして画像の背景の中央に幅100%×縦300のbackground-colorを敷くということになります。
ご回答いただいたタグを試しましたがうまく実装できず・・・
divとcssは別々にできませんでしょうか？
すみません、どうやら私はご質問が理解できていないようです。
ご質問を理解できたら回答に追記させていただきます。
＞回答した後に気づきましたが、重複質問ではありませんか？
https://teratail.com/questions/348489
こちらは先ほど使い方がわからず、内容を修正したかった際に出来なかったので新しい質問レスを誤って作ってしまいましたので、前回の質問は現在削除申請中の質問になります。
質問の編集を拝読。
これは、固定幅に変更した（レスポンシブをあきらめた）、という読みで合っていますか？
また、当方の回答で希望に合わない部分を指摘していただけると、当方の理解が進むのではないかな、と思っております。
恐縮ですが、ご協力いただけますか？
もしかして、bg帯の高さが200pxではないことがご不満でしょうか？
＞bg帯の高さが200pxではないことがご不満でしょうか？
bgの帯ですがサイズ指定は可能でしょうか？
ウィンドウサイズを広げたところbg帯と画像の高さが同じになってしまいます。
> ウィンドウサイズを広げたところbg帯と画像の高さが同じになってしまいます
当方の回答の話ですよね？
当方の環境ではその現象は確認できませんでした。
milk77さんの環境では、回答で示したページでも「ウィンドウサイズを広げたところbg帯と画像の高さが同じになる」という現象は確認できる、ということでしょうか？
【横1000px × 縦800 の画像】 と 【幅1000px × 縦auto;】 のbodyで設定したため
教えていただいたcssのタグだけでは画像のサイズもつぶれてしまい表示されませんでした。
希望はhtmlに画像を指定してcssで背景のサイズを記述したいです。
質問の編集を拝読しました。
画像の横幅を指定し、かつ、縦横比を固定し、かつ、boxの縦横比を固定する、となると、つまりは 画像の横幅→画像の高さ=boxの高さ→boxの幅、というように算出するという理解で合っていますか？
そうだとすると、画像の横幅が固定値なので、決め打ちで指定していけばいいと思うのですが、それでいいですか？
（その場合はレスポンシブ対応できなくなります）
つまり、imgタグが必須条件、という理解で合っていますか？
それならば、質問に書いた方がいいと思いますが。
記述方法がわからないので、タグの想像がつきませんでした。
imgタグ必須条件 という意味でしたら、そちらになると思います！
＞横幅→画像の高さ=boxの高さ→boxの幅、というように算出するという理解で合っていますか？
画像と背景が1000pxで画像の横幅を800pxくらいにして背景のbg-colorを表示させたいです・・！
レスポンシブ対応はしなくていい、という理解で合っていますか？
それとも、「画像の横幅を指定したい」についての当方の理解が合っていないですか？ その場合、「指定」とはどういう意味ですか？ 当方では width: 500px のような意味だと理解しています。
レスポンシブ対応したいです。
画像は背景と同じ大きさのため画像の横幅を指定したいという意味です。
「画像は背景と同じ大きさ」とはどういう意味だろう…… 背景とは帯のことだよな……
とりあえず、なんか作って「これだと何がダメなの？」って聞いた方が速いような気がしてきました。
そのうちに、なんかします。
画像であげてみたのですが、いかがでしょうか？
（こちらの案件は今日中希望なんです・・涙）
800pxに指定すると小さくならないので、レスポンシブ対応は無理なのでは……
「レスポンシブ」について、横幅可変のような意味と読んでいましたが、なにか別の意味がこもっていますか？
レスポンシブ対応というのは
幅1000pxのboxに対してmax-width:800pxで画像を表示できればと思っていました！
無理なのですね！
1000*500 の画像を、縦横比固定で800pxの幅に変えると、高さが400pxになると思いますが、どうしますか？ boxの下にすき間を開けていいですか？
一旦、そちらでお願いしてもよろしいでしょうか？
大変助かります！
ちなみにですがbgの帯は画像の真ん中にすることは無理ですか？＞＜
そのぐらいはご自分でやるべきだと思います。
グラデーションを20%～60%のところにすればいいのでは。
ありがとうございました！！
無事に完成いたしました。
回答1件
0
ベストアンサー
「bgはbackground-colorで設定したい」に反していますが、まあ一案としてご笑覧ください。
CSS
1div { 2 overflow: hidden; 3 height: 0; 4 padding-top: 56.25%; 5 background: no-repeat url(http://placehold.jp/150x150.png?text=img), 6 linear-gradient(to bottom, 7 transparent 0% 20%, orange 20% 80%, transparent 80% 100%); 8 background-size: contain; 9 background-position: center; 10 border: 1px solid; 11}
なお、将来的にはaspect-ratioで書いた方がいいでしょう。
aspect-ratio - CSS: Cascading Style Sheets | MDN
iOS15でSafariも対応するようなので、数年後には普通に使えそうですね。
質問変更に合わせて追記
こういうことですか？
投稿2021/07/09 00:50
編集2021/07/09 05:21総合スコア36074
グラデの箇所を調整したところ真ん中あたりに帯が配置できました！！！
細かなところまでご相談＆ご教授いただきとても助かりました・・・！
はじめての投稿で戸惑ってしまって、投稿重複ミスなどお騒がせしました。
この度はありがとうございました！とても助かりました✨
ご解決されて何よりです。
あなたの回答
tips
プレビュー
