実現したいこと
- 片側だけはみ出させた子要素の幅を画面端から中央ぴったりの幅にしたい
前提・発生している問題
CSSはBootstrap5.3.0を利用してコンテンツ幅などを管理しています。
div.rowの中のdivを左右に横並びにして、片側だけをはみ出させてそこに画像を配置しようとしているのですが、はみ出させたdivの幅が画面外へ突き抜けていってしまいます。
下の画像でいうと、
- bodyの幅が1536px
- .container／.rowの幅が1320px
- .col-6の幅が660px
- .hamidashiの幅が1086px
になっています。
想定以上に画像が大きくなってしまうので、これを左は画面端からにしたいのです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 8<style> 9 .col-6 { 10 height: 300px; 11 } 12 .hamidashi { 13 margin-left:calc(50% - 50vw); 14 background:#ddd; 15 } 16 .img img{ 17 width: 100%; 18 height: 300px; 19 object-fit:cover; 20 } 21</style> 22</head> 23<body> 24 <div class="container"> 25 <div class="row"> 26 <div class="col-6" style="background:#ccc;">aaaaa</div> 27 <div class="col-6" style="background:#eee;">bbbb</div> 28 <div class="col-6" style="background:#bbb;"> 29 <div class="hamidashi"> 30 <div class="img"><img src="dummy_01.jpg" alt="" width="668" height="500"></div> 31 </div> 32 </div> 33 <div class="col-6" style="background:#aaa;">ddd</div> 34 </div> 35 </div> 36</body>
試したこと
width: 100vwを入れてみたりしましたがよりでかくなりました
補足情報（FW/ツールのバージョンなど）
確認環境：Chrome
Bootstrap5.3.0
0 コメント