Bootstrap 4 / carouselを利用しています。
デフォルトでレスポンシブになっているのですが、ブラウザを小さくすると、画像は調整されるのですが、画像の背景部分が小さくならずそのままの縦サイズで残ってしまっています。
背景も写真と合わせてレスポンシブにしたいのですが、ご教示頂けますと助かります。
*フルwindow(これはok)
![]
*スマホ(写真はリサイジングされてますが、背景は元の高さが維持されており、写真とズレが生じています(背景は写真グレー部分))
実現したいことのイメージは三井物産さんのHPのレスポンシブです。
http://www.mitsui.com/jp/ja/
html
1 <div id="myCarousel" class="carousel slide" data-ride="carousel"> 2 <ol class="carousel-indicators"> 3 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 4 <li data-target="#myCarousel" data-slide-to="1"></li> 5 <li data-target="#myCarousel" data-slide-to="2"></li> 6 </ol> 7 <div class = "carousel"> 8 <div class="carousel-inner" role="listbox"> 9 <div class="carousel-item active"> 10 <img alt="misaki-first" class="first-slide" src="/assets/lesson0-a6297374b549fee0b67975d255084dbb8bdff45c0a3bf4e48ba1ef712a77393f.jpg" /> 11 <div class="container"> 12 <div class="carousel-caption text-xs-left"> 13 <h1>フエイスヨガで美しい笑顔レッスン</h1> 14 <p>千村みさきのHP</p> 15 <p><a class="btn btn-lg btn-danger" href="#" role="button">お問い合わせはこちら</a></p> 16 </div> 17 </div><!--container--> 18 </div><!--carousel-item--> 19 <div class="carousel-item"> 20 <img alt="misaki-second" class="second-slide" src="/assets/lesson0-a6297374b549fee0b67975d255084dbb8bdff45c0a3bf4e48ba1ef712a77393f.jpg" /> 21 <div class="container"> 22 <div class="carousel-caption"> 23 <h1>スマイルラインで話すボイスレッスン</h1> 24 <p>千村みさきのHP</p> 25 <p><a class="btn btn-lg btn-danger" href="#" role="button">詳しくはこちら</a></p> 26 </div> 27 </div><!--container--> 28 </div><!--carousel-item--> 29 <div class="carousel-item"> 30 <img alt="misaki-third" class="second-third" src="/assets/lesson0-a6297374b549fee0b67975d255084dbb8bdff45c0a3bf4e48ba1ef712a77393f.jpg" /> 31 <div class="container"> 32 <div class="carousel-caption text-xs-right"> 33 <h1>こうすれば好印象、笑顔で生き生きレッスン</h1> 34 <p>千村みさきのHP</p> 35 <p><a class="btn btn-lg btn-danger" href="#" role="button">お仕事以来</a></p> 36 </div> 37 </div><!--container--> 38 </div><!--carousel-item--> 39 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 40 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 41 <span class="sr-only">Previous</span> 42 </a> 43 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 44 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 45 <span class="sr-only">Next</span> 46 </a> 47 </div><!--carousel-inner--> 48 </div><!--carousel--> 49 </div><!--carousel slide-->
css
1.carousel { 2 margin-bottom: 4rem; 3} 4.carousel-caption { 5 z-index: 10; 6} 7.carousel-item { 8 background-color: #777; 9 overflow: hidden; 10 height: 30rem;/* トリミングしたい枠の高さ */ 11 position: relative; 12} 13.carousel-item img { 14 position: absolute; 15 top: 50%; 16 left: 50%; 17 -webkit-transform: translate(-50%, -50%); 18 -ms-transform: translate(-50%, -50%); 19 transform: translate(-50%, -50%); 20 width: 100%; 21 height: auto; 22} 23.carousel .item>img { 24 position: absolute; 25 top: 0; 26 left: 0; 27 max-width: 100%; 28 height: auto; 29} 30.carousel-inner > .item > img { 31 position: absolute; 32 top: 0; 33 left: 0; 34 min-width: 100%; 35 height: 100%; 36} 37.carousel-indicators { 38 top: 1.5rem; 39 right: 1.5rem; 40 bottom: auto; 41 left: auto; 42 width: 1rem; 43 margin-left: 0; 44} 45.carousel-indicators > li { 46 margin-bottom: .25rem; 47}
回答2件
あなたの回答
tips
プレビュー