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

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

ただいまの
回答率

89.69%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 5,363

innjera

score 124

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;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gin

    2016/11/21 13:10

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

    キャンセル

  • innjera

    2016/11/21 19:51

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

    キャンセル

回答 2

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/21 23:29

    三井物産を真似したのではなく、使用する写真を、真ん中を中心にして表示したかったので、
    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>」
    が下部にはみ出てしまいます。これに高さを設定すれば良いのでしょうか??

    キャンセル

  • 2016/11/21 23:39

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

    キャンセル

  • 2016/11/22 07:56

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

    キャンセル

+1

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

.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/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/23 13:17

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

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

    キャンセル

  • 2016/11/23 13:20

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

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

    キャンセル

  • 2016/11/23 13:39 編集

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

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

    キャンセル

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

  • ただいまの回答率 89.69%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる