Q&A
回答ありがとうございます。
こちらの方法で無事に解決しました！ありがとうございます！
少しこの質問とはズレるのですがimgの親要素に対して指定した場合は何も変わらず直接imgに指定した場合に有効だったので、この親要素はいらなかったのか。と消したところ最初の状態に戻りました。
この親要素であるdivの必要性？（もしくは役割）についても教えていただけませんか？
お手数をお掛けしますがお力添えの方よろしくお願いします。
container内からimgがはみ出てしまいます
画像そのものが大きいからなのでそのまま貼り付けても大きいのは分かるのですがそれを解消するclassが分かりません。
初歩的なことで申し訳ございませんがお力添えの方よろしくお願いします。
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>デイトラ模写</title> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-white"> <div class="container"> <a class="navbar-brand fw-bold" href="#">30DAYSトライアル</a> <div class="collapse navbar-collapse d-flex flex-row-reverse bd-highlight fw-bolder" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active p-2 bd-highlight" aria-current="page" href="#">デイトラとは</a> </li> <li class="nav-item "> <a class="nav-link active p-2 bd-highlight" href="#">コース一覧</a> </li> <li class="nav-item active"> <a class="nav-link active p-2 bd-highlight " href="#">お問い合わせ</a> </li> </ul> </div> </div> </nav> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> --> </header> <div class=""> <div class="position-relative"> <img src="img/main-vsual-nontitle.png" class="img-fluid w-100" alt="..."> <h1 class="position-absolute top-50 start-50 translate-middle text-center fw-bold">1日1題30日で<br>プロのWebエンジニアになろう！ <p class="fs-6 pt-4">毎日設定された課題をこなすだけ！未経験から</p> <p class="fs-6 ">30日でプログラミングスキルが身につきます</p> </h1> </div> <div class="container"> <h2 class="text-center mt-5 mb-5 fw-bold">デイトラとは</h2> <div class="d-flex justify-content-left"> <img src="img/about.png" alt="" style="width: 50%;"> <p class="p-5 fw-bolder container-text">デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！</p> </div> <h2 class="text-center mt-5 mb-5 fw-bold">コース一覧</h2> <div class="d-flex justify-content-center "> <div class="mw-100 overflow-hidden"> <img src="img/web_first.png" alt=""> </div> <div> <img src="img/web_second.png" alt=""> </div> <div> <img src="img/web_third.png" alt=""> </div> </div> <div> <h2 class="text-center mt-5 mb-5 fw-bold">お問い合わせ</h2> <form> <div class="mb-3 text-center"> <label for="exampleInputEmail1" class="form-label mb-0">さあ今日から30日間を始めよう！</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <button type="submit" class="btn btn-danger">Submit</button> </form> </div> </div> </div> </body> </html>
回答2件
0
img-fluid クラスを付けるのでもいけますが、
はみ出させたいシーンってほぼないと思うので、
img 要素自体に最大幅100%を付けとけば良いと思います。
css
1img { 2 max-width: 100%; 3 height: auto; 4}
投稿2021/10/28 00:49
総合スコア784
0
ベストアンサー
Img要素に img-fluidクラスを付加すればはみ出さなくなります。
投稿2021/10/27 13:40
総合スコア33790
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/28 10:24