質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

4984閲覧

bootstrap 画像を画面いっぱいに広げたい

gomakasu423

総合スコア31

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2019/02/23 08:46

いつもお世話になっております。

bootstrapでカルーセルインナーの中に画像を入れて
スライドショーを作っています。

画像を画面幅いっぱいに広げたいのですがうまくいきません。。
ご教示いただけたら幸いです。

参考サイト
https://www.youtube.com/watch?v=9cKsq14Kfsw&feature=youtu.be
https://cccabinet.jpn.org/bootstrap4/components/carousel

html

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 11 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 12 13 <title>Responsive Bootstrap Website Start To Finish with Bootstrap</title> 14 </head> 15 <body> 16 <header> 17 <nav class="navbar navbar-expand-md navbar-light bg-light"> 18 <a class="navbar-brand" href="#"><img src="./img/logo.png"></a> 19 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> 20 <span class="navbar-toggler-icon"></span> 21 </button> 22 <div class="collapse navbar-collapse navbar-right " id="Navber"> 23 <ul class="navbar-nav ml-auto"> 24 <li class="navbar-item"> 25 <a class="nav-link" href="#" >Home</a> 26 </li> 27 <li class="navbar-item"> 28 <a class="nav-link" href="#">About</a> 29 </li> 30 <li class="navbar-item"> 31 <a class="nav-link" href="#">Service</a> 32 </li> 33 <li class="navbar-item"> 34 <a class="nav-link" href="#">Team</a> 35 </li> 36 <li class="navbar-item"> 37 <a class="nav-link" href="#">Contact</a> 38 </li> 39 </ul> 40 </div> 41 </nav> 42 </header> 43 <div id="slide" class="carousel slide" date-ride="carousel"> 44 <ol class="carousel-indicators"> 45 <li data-target="#slide" data-slide-to="0" class="active"></li> 46 <li data-target="#slide" data-slide-to="1"></li> 47 <li data-target="#slide" data-slide-to="2"></li> 48 </ol> 49 <div class="carousel-inner"> 50 <div class="carousel-item active"> 51 <img src="./img/background.png" alt=""> 52 <div class="carousel-caption"> 53 <h1 class="display-2">Bootstrap</h1> 54 <h2>Compleat Website Layout</h2> 55 <button type="button" class="btn btn-outline-light btn-lg">View Demo</button> 56 <button type="button" class="btn btn-primary btn-lg">Get Started</button> 57 </div> 58 </div> 59 <div class="carousel-item"> 60 <img src="./img/background2.png" alt=""> 61 </div> 62 <div class="carousel-item"> 63 <img src="./img/background3.png" alt=""> 64 </div> 65 </div> 66 </div> 67 68 69 <!-- Optional JavaScript --> 70 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 71 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 72 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 73 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 74 </body> 75</html> 76

CSS

1@import url(http://fonts.googleapis.com/css?family=Poppins:400,500,700); 2 3@media (max-width: 992px) { 4} 5@media (max-width: 768px) { 6} 7@media (max-width: 576px) { 8} 9 10 11.carousel-item{ 12 background-size: cover; 13 /* transition: -webkit-transform 0.5s ease; 14 transition: transform 0.5s ease; 15 transition: transform,-webkit-transfrom 0.5s ease; 16 -webkit-backface-visibility-:visible; 17 backface-visibility: :visible; */ 18} 19 20/*---fixed background-image---*/ 21figure{ 22 position: relative; 23 width: 100%; 24 height: 60%; 25 margin: 0 !important; 26} 27

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

object-fitプロパティと、w-*クラスh-*クラスを使うことで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。画像に設定している height や object-fitプロパティの値は適宜変更してください。

HTML

1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 9 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 11 12 <title>Responsive Bootstrap Website Start To Finish with Bootstrap</title> 13</head> 14 15<body> 16 <header> 17 <nav class="navbar navbar-expand-md navbar-light bg-light"> 18 <a class="navbar-brand" href="#"><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=./img/logo.png"></a> 19 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> 20 <span class="navbar-toggler-icon"></span> 21 </button> 22 <div class="collapse navbar-collapse navbar-right " id="Navber"> 23 <ul class="navbar-nav ml-auto"> 24 <li class="navbar-item"> 25 <a class="nav-link" href="#">Home</a> 26 </li> 27 <li class="navbar-item"> 28 <a class="nav-link" href="#">About</a> 29 </li> 30 <li class="navbar-item"> 31 <a class="nav-link" href="#">Service</a> 32 </li> 33 <li class="navbar-item"> 34 <a class="nav-link" href="#">Team</a> 35 </li> 36 <li class="navbar-item"> 37 <a class="nav-link" href="#">Contact</a> 38 </li> 39 </ul> 40 </div> 41 </nav> 42 </header> 43 <div id="slide" class="carousel slide" date-ride="carousel"> 44 <ol class="carousel-indicators"> 45 <li data-target="#slide" data-slide-to="0" class="active"></li> 46 <li data-target="#slide" data-slide-to="1"></li> 47 <li data-target="#slide" data-slide-to="2"></li> 48 </ol> 49 <div class="carousel-inner"> 50 <div class="carousel-item active w-100"> 51 <img src="http://placehold.jp/3d4070/ffffff/800x350.png?text=1" alt="" class="d-block w-100 h-100"> 52 <div class="carousel-caption"> 53 <h1 class="display-2">Bootstrap</h1> 54 <h2>Compleat Website Layout</h2> 55 <button type="button" class="btn btn-outline-light btn-lg">View Demo</button> 56 <button type="button" class="btn btn-primary btn-lg">Get Started</button> 57 </div> 58 </div> 59 <div class="carousel-item w-100"> 60 <img src="http://placehold.jp/3d4070/ffffff/800x350.png?text=2" alt="" class="d-block w-100 h-100"> 61 </div> 62 <div class="carousel-item w-100"> 63 <img src="http://placehold.jp/3d4070/ffffff/800x350.png?text=3" alt="" class="d-block w-100 h-100"> 64 </div> 65 </div> 66 </div> 67 68 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 69 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 70 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 71</body> 72 73</html>

CSS

1@import url(http://fonts.googleapis.com/css?family=Poppins:400,500,700); 2 3/* 追加ここから */ 4.carousel-item { 5 height: 350px; 6} 7 8img { 9 object-fit: cover; 10} 11/* 追加ここまで */

投稿2019/02/23 09:30

編集2019/02/23 09:35
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomakasu423

2019/02/23 12:33

ありがとうございました。 解決いたしました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問