Q&A
中に入れようとされている画像の縦横はどのようなサイズですか。
#つまずいている事
現在オリジナルアプリの作成中でHOMEのページにカルーセルを実装しています。
しかしCSSの適用がうまくいかずサイズ比が想定の通り表示できません。
アドバイスのほどお願い致します。
#HomeのViewコード（home.html.erb）
Ruby
1<% provide(:title, "Home")%> 2 <div id="myCarousel" class="carousel slide"> 3 <ol class="carousel-indicators"> 4 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 5 <li data-target="#myCarousel" data-slide-to="1"></li> 6 <li data-target="#myCarousel" data-slide-to="2"></li> 7 </ol> 8 <!-- Carousel items --> 9 <div class="carousel-inner photo"> 10 <div class="active item"><%= image_tag 'band.jpg', class:"image" %></div> 11 <div class="item"><%= image_tag 'band2.jpg', class:"image" %></div> 12 <div class="item"><%= image_tag 'band3.jpg', class:"image" %></div> 13 </div> 14 <!-- Carousel nav --> 15 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 16 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 17 </div> 18 19<% if logged_in? %> 20 <%= render 'static_pages/user_logged_in' %> 21<% else %> 22 <%= render 'static_pages/user_not_logged_in' %> 23<% end %>
#CSSコード（custom.scss）
CSS
1.carousel{ 2 height: 500px; 3 margin: auto; 4 .item { 5 height: 100%; 6 } 7 .image { 8 // position: absolute; ★ここを適用すると大きさは想定の通りになるが画像が表示されなくなる。 9 width: 100%; 10 } 11} 12
#ブラウザでのHTML表示
HTML
1<div class="container"> 2 <header class="navbar navbar-fixed-top navbar-dar" style="background-color: #50aba9;"> 3 <div class="container"> 4 <a id="logo" href="/">Band app</a> 5 <nav> 6 <ul class="nav navbar-nav navbar-right"> 7 <li> 8 <a class="menu" href="/"> 9 <i class="fa fa-home fa-lg"></i> Home 10</a> </li> 11 <li> 12 <a class="menu" href="/posts/new"> 13 <i class="fa fa-comment fa-lg"></i> Post 14</a> </li> 15 <li class="dropdown"> 16 <a href="#" class="dropdown-toggle menu" data-toggle="dropdown"> 17 <i class="fa fa-bars fa-lg fa-icon"></i>Menu<b class="caret"></b> 18 </a> 19 <ul class="dropdown-menu"> 20 <li> 21 <a class="menu" href="/users"> 22 <i class="fa fa-users fa-lg"></i> Users 23</a> </li> 24 <li> 25 <a class="menu" href="/users/104"> 26 <i class="fa fa-file fa-lg"></i> Profile 27</a> </li> 28 <li> 29 <a class="menu" href="/users/104/edit"> 30 <i class="fa fa-edit fa-lg"></i> User-edit 31</a> </li> 32 <li class="divider"></li> 33 <li> 34 <a class="menu" rel="nofollow" data-method="delete" href="/logout"> 35 <i class="fa fa-door-open fa-lg"></i> Log out 36</a> </li> 37 </ul> 38 </li> 39 </ul> 40 </nav> 41 </div> 42</header> 43 <div id="myCarousel" class="carousel slide"> 44 <ol class="carousel-indicators"> 45 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 46 <li data-target="#myCarousel" data-slide-to="1" class=""></li> 47 <li data-target="#myCarousel" data-slide-to="2" class=""></li> 48 </ol> 49 <!-- Carousel items --> 50 <div class="carousel-inner photo"> 51 <div class="item active"><img class="image" src="/assets/band-d33e818289f361d0ee163fbed62a878d7dc217b2262acb88201c800f0edbd7be.jpg" alt="Band"></div> 52 <div class="item"><img class="image" src="/assets/band2-fb8e56d3f2212fa57d618d9929d55b892605e9b8c2a0d2d488d9b3f2140cdee9.jpg" alt="Band2"></div> 53 <div class="item"><img class="image" src="/assets/band3-3cb592ed06f813167b8d149cc3f37604df36139a09d96e0dddaac3d93294fc27.jpg" alt="Band3"></div> 54 </div> 55 <!-- Carousel nav --> 56 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 57 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 58 </div> 59 60 <div class="center jumbotron"> 61 <h1>Welcome to Band App</h1> 62 <hr class="my-4"> 63 <p>メンバーを募集して理想のバンドを組もう！！</p> 64</div> 65 66*投稿部分省略 67 68 69 </div> 70
#Bootstrapバージョン
gem 'bootstrap-will_paginate', '1.0.0'
gem 'bootstrap-sass', '3.3.7'
#position: absolute; 適用時
＊画像が表示されなくなってしまう。
#position: absolute; 未適用時
＊縦幅が大きく表示されてしまう、二つの画像の大きさは同じになります。
#お願い
一人では解決が難しいため
どなたかアドバイスをよろしくお願いします。
以上です。
コメント有難う御座います。
サイズは下記になります。
band.jpg：5184 × 3456 ピクセル
band2.jpg：5184 × 3456 ピクセル
band3.jpg：2500 × 1875 ピクセル
.carouselの横幅はどうなっていますか。
.carouselの横幅はおそらくその親要素いっぱいの幅だと思いますが、横幅が750pxより大きい場合画像をどのようにその中に収めようとされているのでしょうか。
.carouselのサイズは1140 × 500ピクセルになります。
恐縮ですが元画像の大きさについては考慮せず、
CSSでコントロールできないか、と思い試行錯誤していた状況になります。。
どうぞよろしくお願い致します。
cssでコントロールするにも、画像の縦横比率が外枠（この場合1440 x 500）と違う場合、画像が歪んでもそのサイズに合わせるのか、両端または上下を余らせるのか、画像の比率はそのままにして入りきらない上下または左右の部分をカットしてしまうのかで、回答が変わりますので。
有難うございます、勉強になります。
今回の場合ですと「画像の縦横比率が外枠（この場合1440 x 500）と違うが、画像が歪んでもそのサイズに合わせる」という方法でご教授頂けると大変助かります。
bootstrapのバージョンはなんですか?
あとerbじゃなくhtmlにしたほうが回答がつきやすいとおもいます
コメントありがとうございます。
ご指摘の点追記させて頂きましたので
ご確認頂けますと幸いです。
回答2件
0
ベストアンサー
質問者さんの実現したいことは、object-fitプロパティを使うことで実現できると思います(動作確認用リンク)。また、質問文のコードでは、ナビゲーションとカルーセルの一部が重なっているため、回答文のコードでは、body要素にpaddingプロパティを適用することで、この問題を解決しています。
HTML
1<div class="container"> 2 <header class="navbar navbar-fixed-top navbar-dar" style="background-color: #50aba9;"> 3 <div class="container"> 4 <a id="logo" href="/">Band app</a> 5 <nav> 6 <ul class="nav navbar-nav navbar-right"> 7 <li> 8 <a class="menu" href="/"> 9 <i class="fa fa-home fa-lg"></i> Home 10</a> </li> 11 <li> 12 <a class="menu" href="/posts/new"> 13 <i class="fa fa-comment fa-lg"></i> Post 14</a> </li> 15 <li class="dropdown"> 16 <a href="#" class="dropdown-toggle menu" data-toggle="dropdown"> 17 <i class="fa fa-bars fa-lg fa-icon"></i>Menu<b class="caret"></b> 18 </a> 19 <ul class="dropdown-menu"> 20 <li> 21 <a class="menu" href="/users"> 22 <i class="fa fa-users fa-lg"></i> Users 23</a> </li> 24 <li> 25 <a class="menu" href="/users/104"> 26 <i class="fa fa-file fa-lg"></i> Profile 27</a> </li> 28 <li> 29 <a class="menu" href="/users/104/edit"> 30 <i class="fa fa-edit fa-lg"></i> User-edit 31</a> </li> 32 <li class="divider"></li> 33 <li> 34 <a class="menu" rel="nofollow" data-method="delete" href="/logout"> 35 <i class="fa fa-door-open fa-lg"></i> Log out 36</a> </li> 37 </ul> 38 </li> 39 </ul> 40 </nav> 41 </div> 42 </header> 43 <div id="myCarousel" class="carousel slide"> 44 <ol class="carousel-indicators"> 45 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 46 <li data-target="#myCarousel" data-slide-to="1" class=""></li> 47 <li data-target="#myCarousel" data-slide-to="2" class=""></li> 48 </ol> 49 <!-- Carousel items --> 50 <div class="carousel-inner photo"> 51 <div class="item active"><img class="image" src="http://placehold.jp/3d4070/ffffff/5184x3456.png?text=image1" alt="Band"></div> 52 <div class="item"><img class="image" src="http://placehold.jp/3d4070/ffffff/5184x3456.png?text=image2" alt="Band2"></div> 53 <div class="item"><img class="image" src="http://placehold.jp/3d4070/ffffff/2500x1875.png?text=image3" alt="Band3"></div> 54 </div> 55 <!-- Carousel nav --> 56 <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 57 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 58 </div> 59 60 <div class="center jumbotron"> 61 <h1>Welcome to Band App</h1> 62 <hr class="my-4"> 63 <p>メンバーを募集して理想のバンドを組もう！！</p> 64 </div> 65 66 *投稿部分省略 67 68</div>
CSS
1body { 2 padding-top: 70px; 3} 4 5.carousel { 6 height: 500px; 7} 8 9.carousel-inner, .item { 10 height: 100%; 11} 12 13.carousel .image { 14 width: 100%; 15 height: 100% !important; 16 object-fit: fill; 17}
投稿2019/02/26 04:41
総合スコア14731
アドバイス頂き有難う御座います。
object-fitというCSSがあることすら知りませんでした、勉強になります。
見事問題を解決することができました。
ちなみに「!important」という記載には何か意味があるのでしょうか？
> ちなみに「!important」という記載には何か意味があるのでしょうか？
なぜ`!important`規則を適用したのか、という質問であれば、 Bootstrap が設定しているスタイルが優先して適用されることを防ぐためです。
`!important`という記述はどういう効果を持っているのか、という質問であれば、`!important`規則を適用することで、 CSS 内で作られたその他の宣言を上書きすることができます。
0
外枠の縦横比率に合わせるということであれば
css
1.carousel-inner { 2 height: 100%; 3} 4 5.carousel-inner > .item > img { 6 height: 100%; 7}
の追加でいかがでしょうか。
投稿2019/02/25 15:42
編集2019/02/26 10:51総合スコア1899
下記にて適用しましたが、上記２番目の画像と同じ表示になってしまいました。
.carousel{
height: 500px;
margin: auto;
.item {
height: 100%;
}
.image {
width: 100%;
height: 100%;
}
}
また試しに以下のようにimageクラスではなく、photoクラスにCSS適用してみましたら
画像は見切れてしまうがカルーセルの大きさベースに画像が表示されるようになりました。
.photo {
width: 100%;
height: 100%;
}
何かお気付きの点があればお願い致します。
修正しましたので、ご確認ください。
アドバイス有難う御座います。
上記のCSS適用してみましたが縦長のレイアウトになってしまいました。。
恐れ入りますが今回は別の方の回答で希望の表示にすることができました。
お忙しいところご丁寧にアドバイス頂きまして有難う御座いました。
あなたの回答
tips
プレビュー
