前提
サイズ指定をしたdivの中にimgでpngデータを入れたのですが、divからはみ出してしまいます。
imgにはcssの方で
img{
width: 100%;
height: 100%;
object-fit: contain;
}
を指定しており、画像は大きく表示されるため少なくとも「width: 100%;」については機能しているようです。しかし、「object-fit: contain;」が機能していないのか、正方形のpngデータの場合はdivに収まるものの、縦長長方形のpngだとdivからはみ出て表示されてしまいます。
実現したいこと
・divの大きさに合わせて、中に入れたimgを縦横比を守りつつ見切れないように表示させたい。
発生している問題・エラーメッセージ
DWで作業していますが、エラーは特に見当たりませんでした。
該当のソースコード
HTML
1 <div class="sakuhin"> 2 <h2>『赤い宝石の例』</h2> 3 <p>2022年3月17日</p> 4 <div class="sakuhin-mini"> 5 <img src="souko/akaihouseknorei.png" alt="『赤い宝石の例』"> 6 </div> 7 <div> 8 <p> 最近思ったことを、図にしてみるの試み。「完成品だけぱぱっと作りたい!」は無理なのだ。</p> 9 </div> 10 <label class="pop"> 11 <span>「詳しく」</span> 12 <input type="checkbox" name="checkbox2"> 13 <div id="popup2"> 14 <div class="popup-inner"> 15 <div class="popup-img"> 16 ※※※問題の、divからはみ出てしまうimg↓※※※ 17 <img src="souko/akaihouseknorei.png" alt="『赤い宝石の例』"> 18 </div> 19 <div class="popup-text"> 20 <p> 最近思ったことを、図にしてみるの試み。「完成品だけぱぱっと作りたい!」は無理なのだ。</p> 21 <p class="back-button">画面をクリック・タップで戻る</p> 22 </div> 23 </div> 24 </div> 25 </label> 26 </div> 27
[CSS] *{ box-sizing: border-box; } img{ width: 100%; height: 100%; object-fit: contain; } .sakuhin{ display: flex; flex-direction: column; align-items: center; margin: 15px; padding-bottom: 10px; width: 450px; height: 450px; background-color: #f3f3f2; border-radius:10px; position: relative; } .sakuhin-mini{ max-width: 430px; max-height: 350px; min-width: 100px; min-height: 100px; margin-bottom: 10px; } .pop{ display:block; position: relative; } .popup-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; height: 100%; } .popup-text{ display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: 40%; min-width: 280px; } .popup-img{ margin:0 auto; max-width: 60%; max-height: 90%; background-color: beige; border-radius: 10px; } .back-button{ width:280px; text-align: center; margin-top:60px auto 0 auto; background-color: #006e54; border-radius: 10px; } #popup2{ width: 100%; height: 100%; background:rgba(0,0,0,0.8); padding:0 10px; display:none; position:fixed; z-index: 100; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pop input[type="checkbox"]{ display:none; } .pop input[type="checkbox"]:checked + #popup2{ display:flex; flex-wrap: wrap; flex-direction:column; justify-content: center; align-items: center; transition:.2s; width: 100%; height: 100%; padding: 20px; }
試したこと
・imgにCSSで
img{
width: 100%;
height: 100%;
object-fit: contain;
}
を指定する。
・*{
box-sizing: border-box;
}
を指定する。
・親のdivにmarginやpaddingなどを入れて動きを見てみる(効果なし)。
補足情報(FW/ツールのバージョンなど)
問題のdivからはみ出てしまうimgはこのサイトの「詳しく」のボタンがついたものの2つ目の箱の中に入っています。クリックで出てくるポップアップの中身です。
そしてこのCSSで設定しているポップアップはこちらのサイトさんのものを使用しています。
ネットで「HTML img 親からはみ出る」などで検索して試行錯誤してみましたが、どうにもならなかったため質問させていただきました。初心者故、何か致命的な見落とし等あるかもしれません。
長くなってしまい申し訳ありませんが、何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/23 01:40
2022/07/23 01:47