bootstrap4: Carouselのimgeを縦横同一比のままresponsibeにしたい

Question

Bootstrap 4 / carouselを利用しています。
デフォルトでレスポンシブになっているのですが、ブラウザを小さくすると、画像は調整されるのですが、画像の背景部分が小さくならずそのままの縦サイズで残ってしまっています。

背景も写真と合わせてレスポンシブにしたいのですが、ご教示頂けますと助かります。
*フルwindow（これはok）
![]
*スマホ（写真はリサイジングされてますが、背景は元の高さが維持されており、写真とズレが生じています（背景は写真グレー部分））

実現したいことのイメージは三井物産さんのHPのレスポンシブです。
http://www.mitsui.com/jp/ja/

   <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class = "carousel">
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
          <img alt="misaki-first" class="first-slide" src="/assets/lesson0-a6297374b549fee0b67975d255084dbb8bdff45c0a3bf4e48ba1ef712a77393f.jpg" />
          <div class="container">
            <div class="carousel-caption text-xs-left">
              <h1>フエイスヨガで美しい笑顔レッスン</h1>
              <p>千村みさきのHP</p>
              <p><a class="btn btn-lg btn-danger" href="#" role="button">お問い合わせはこちら</a></p>
            </div>
          </div><!--container-->
          </div><!--carousel-item-->
          <div class="carousel-item">
          <img alt="misaki-second" class="second-slide" src="/assets/lesson0-a6297374b549fee0b67975d255084dbb8bdff45c0a3bf4e48ba1ef712a77393f.jpg" />
          <div class="container">
            <div class="carousel-caption">
              <h1>スマイルラインで話すボイスレッスン</h1>
              <p>千村みさきのHP</p>
              <p><a class="btn btn-lg btn-danger" href="#" role="button">詳しくはこちら</a></p>
            </div>
          </div><!--container-->
          </div><!--carousel-item-->
          <div class="carousel-item">
          <img alt="misaki-third" class="second-third" src="/assets/lesson0-a6297374b549fee0b67975d255084dbb8bdff45c0a3bf4e48ba1ef712a77393f.jpg" />
          <div class="container">
            <div class="carousel-caption text-xs-right">
              <h1>こうすれば好印象、笑顔で生き生きレッスン</h1>
              <p>千村みさきのHP</p>
              <p><a class="btn btn-lg btn-danger" href="#" role="button">お仕事以来</a></p>
            </div>
          </div><!--container-->
          </div><!--carousel-item-->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div><!--carousel-inner-->
      </div><!--carousel-->
    </div><!--carousel slide-->

.carousel {
  margin-bottom: 4rem;
}
.carousel-caption {
  z-index: 10;
}
.carousel-item {
  background-color: #777;
  overflow: hidden;
  height: 30rem;/* トリミングしたい枠の高さ */
  position: relative;
}
.carousel-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}
.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
}
.carousel-indicators {
  top: 1.5rem;
  right: 1.5rem;
  bottom: auto;
  left: auto;
  width: 1rem;
  margin-left: 0;
}
.carousel-indicators > li {
  margin-bottom: .25rem;
}

Comments

[gin]

参考の画像には「画像」いないですよね？背景のことですか？

[innjera]

いつも有難う御座います。画像と背景、両方の意味でした。失礼しました。

Answer 1

とりあえずコード上にいるimgは、見た感じ.carousel-itemのheight: 32remを取っちゃえばいいように思えますが、取ったら崩れます？
ほかで指定している可能性があるならheight: auto;で。

.carousel-item {
	/*height: 32rem;*/
	background-color: #777;
}

Comments

[innjera]

heightを取ると見ると、写真がフルサイズで表示されてしまいました。。。確かにレスポンシブですが、さらに大きく表示されてしまいました・・・

[gin]

縦長の画像ですか？？

> フルwindow（これはok）
ってアタマの先しか見えてないですけどOKなんです？？

[innjera]

縦長の画像です。
（頭の部分しか見えてないのは、それはそれで問題なのですが、サイズの件とは別問題と思い、まずは枠を直してから写真の見え方を修正しようと思っていました。。）

[gin]

heightをautoにしたら画像の高さに準じるようになります。
三井物産の画像は縦長じゃないですよね。

[innjera]

有難う御座います。つまりは元画像に問題があって、横長の画像を使用する必要があるということですよね。

[gin]

画像に問題があるかどうかはなんとも言えません。
PC版のスライダーって横長ですよね？
どうするつもりだったんです？？
横長にする前提で縦長の画像を使用していたのなら問題(ってほどでもない？)ですが…

[innjera]

質問がわかりにくく申し訳ありません。今しがた、横の写真を使用したところ、問題点がよりクリアになりましたので、大変恐縮ですが、質問文にお目通し頂き、修正ポイントのご指摘頂けますと大変有難いです。宜しくお願い致します。

[gin]

背景いります？
あと画像縦中央にいますね。
私が夕方試した時は上についてましたが…

[innjera]

写真の位置はhttp://www.tam-tam.co.jp/tipsnote/html_css/post10099.htmlを見て先ほど修正しました。
背景。。。。た、確かに、不要です。。ちょっと自分でもがいて見ます！ヒントを有難う御座います。

[gin]

一応、三井物産の解説(？)をしておくと、PC版のときだけ画像と文章をabsoluteで重ねてますね。
SP版では解除されて、画像が上の文章が下の通常並びになってます。

[innjera]

背景を入れているのが.carousel-itemなのですが、これを消すと写真そのものが消えてしまいました。。。。
三井物産さんのは確かに文書の配置が変わっていますね。。私にはレベルが高く、いかんともし難くなってきました。。。

[gin]

いや、箱は残して背景だけ消すんですよ～
「background-image:none;」とかで。

[gin]

あと三井物産のも特に難しく考える必要はなく、まずは画像上で文章下のSP版の見た目を作ります。
それをPC版で「.carousel-item」を「position:relative;」にして起点とし、画像と文章を「position:absolute;」で調整してるだけです。

[innjera]

有難う御座います。「background-image:none;」で背景は消えましたが、写真の外側の枠を設定している「carousel-item」に高さが残っているので、右側と左側に設定しているボタン（灰色部分）や白のボタン３つ（右上）ははみ出てしまいます。（写真、差し替えました）
height: auto;にすると写真が消えてしまいます。。。

[gin]

「height: auto;」で消えるのは「position:absolute;」などを指定しているからです。
これって三井物産のを真似したんでしょうか？
真似するなら最後までキッチリ真似しないと崩れちゃいますよ～
↓このあたりをいったんごっそりコメントアウトしてみてください。
-------
.carousel-item img {
/* position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
width: 100%;
height: auto;
}
-------

[gin]

あ、PC版の表示が問題ないようだったらSP版はこれを入れてください。
-------
.carousel-item img {
position: static;
top: 0;
left: 0;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
height: auto;
}
-------
モバイルファーストで組んでるならwidthとheightだけでいいですが。

[innjera]

三井物産を真似したのではなく、使用する写真を、真ん中を中心にして表示したかったので、
http://www.tam-tam.co.jp/tipsnote/html_css/post10099.html
を参考にしました。
ご教示いただいたやり方ですと、（PCだと）写真の下部が切り取られた形で表示される（SPだと）写真は全て表示されますが、下部にのですが（「部PCで見た際に、写真上部から固定されてしたに表示されているので、
「<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>」
が下部にはみ出てしまいます。これに高さを設定すれば良いのでしょうか？？

[gin]

CSSはPC版とSP版両方調整しないとダメですよ？
PC版は元のままでSP版はposition: static;にしたやつを指定です。
あと左右のは画像の大きさに合わせたいのであればJSで画像の高さを取って入れ込む感じですね～

[innjera]

なるほど、JSで調整していく必要があるわけですね。有難う御座いました！

Answer 2

解決されたようですが、縦横比を保ったまま縦長も横長も画面いっぱいに、は下記のようにすれば実現できそうです。

.carousel-item {
	height: 70vh;
}
.carousel-item > img {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-height: none !important;
	max-width: none !important;
	min-height: 100%;
	min-width: 100%;
	
}
```**動くサンプル：**[https://jsfiddle.net/5wh987ra/](https://jsfiddle.net/5wh987ra/)

Comments

[innjera]

有難う御座います！！！JSに手を加えずにやるやり方を求めていたので、まさに、でした！本当に有難う御座います。

[gin]

あれ？
画像切れても要素いっぱいに表示でよかったんですか？？
てっきり画像全体表示と思ってました…＜求めていた三井物産もそうなので
なので縦長はPCだとそれだけでスクロールが出るので横長とか言ってたんですｗ

[kei344]

To: ginさん
その場合 min-height min-width を消して
max-height: 100% !important;
max-width: 100% !important;
か、
/**/.carousel-item > img {
/**/ display: block;
/**/ height: 100% !important;
/**/ margin: 0 auto;
/**/ object-fit: contain;
/**/}
こんなかんじで。

[gin]

画像の全体を表示するってやつですかね？
明日試してみますね～^^
object-fit: contain;はcoverのほうがいいですかね。containだと画像が切れちゃうので…

でもいろいろ厄介なんですよね～
横長画像だと小さくすると文字が中途半端に被るから画像に被らないようにしてやらないとだろうし、左右のコントローラーも画像の範囲だけがいいってことですし…

[gin]

寝起きだといろいろ言葉足らずでいかんな…
無論一部ってことは理解しています～
kei344さんは汲み取ってくれてるとは思いますが^^;

[kei344]

To: ginさん
> containだと画像が切れちゃうので…
切れないと思いますよ。
https://jsfiddle.net/5wh987ra/1/

> でもいろいろ厄介なんですよね～
「こう書けばできるのでは」を提示したまでです。

[kei344]

> 一部ってことは理解しています
なんのことでしょう。

[innjera]

kei344さん、ginさん
いつも有難う御座います！私のレベルが低いこともあり、質問の仕方が不明瞭で色々と誤解を与えてしまっているのだと思います。申し訳ありません！この手のデザインは元の写真の問題もあり、結構ややこしいことはよく分かりました。

お2方のアドバイスにてとてもcssの理解が深まっております。やりたいことも実現できておりますので、引き続き宜しくお願い致します！！！

[gin]

あ、width指定なしでheightのみ指定でしたね。

> 一部
画像配置の部分だけで、厄介って言った部分に関しては当り前ですが含まれていないということですー
「「こう書けばできるのでは」を提示したまでです。」これはもちろん承知しておりますと。
別にそこで書かなくてよかった余計な独り言なのです…
言葉まだ足りてないですが、悪気は100％ないので気分を悪くされていたらすみません！

[kei344]

> あ、width指定なしでheightのみ指定でしたね。
width指定しても大丈夫です。（というかBootstrapで指定されています）
（自分で書いておいてあれですが、とりあえず object-fit はもう少しブラウザ対応が進んでからかな、とは思います）

> 悪気は100％ないので気分を悪くされていたらすみません！
別に何も思っていませんよ、何のことだろう？と不思議になっただけなので。