Bootstrap - изображение карты одинаковой высоты - PullRequest
Новая
       19

Bootstrap - изображение карты одинаковой высоты

0 голосов
/ 13 июня 2019

Я использую карты Bootstrap, и у меня разные размеры изображений. Мне нужно, чтобы эти изображения были одинаковой высоты, избегая style=fixed height (потому что из-за этого изображение выглядит плохо).

Вот мой текущий код: код ручки

Ответы [ 3 ]

0 голосов
/ 13 июня 2019

Вы можете попробовать следующее, но оно обрежет изображение. 

img {
  object-fit:cover;
  height: 100%;
}
0 голосов
/ 13 июня 2019

использовать height:100%;object-fit:cover свойство для img.Изображение будет масштабировано в соответствии с высотой, чтобы поместиться в карту 

img {
  height:100%;
  object-fit:cover;
}
<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">


<div class="container-fluid mt-3">
  <div class="row">
    <div class="card-deck">
      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=740&q=80" alt="Card image cap">
          <div class="title1">
            <h5 class="card-title m-auto">Card title</h5>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1461151304267-38535e780c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=890&q=80" alt="Card image cap">
          <div class="title1">
            <h5 class="card-title m-auto">Card title</h5>
          </div>
        </div>
      </div>

      <div class="col-sm-8 col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1546483875-ad9014c88eba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=674&q=80" alt="Card image cap">
          <div class="title1">
            <h5 class="card-title m-auto">Card title</h5>
          </div>
        </div>
      </div>

    </div>
    <!-- Card deck -->
  </div>
  <!-- Row -->
</div>
<!-- Container -->
0 голосов
/ 13 июня 2019

Вы можете использовать:

HTML 

<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">


<div class="container-fluid mt-3">
            <div class="row">
                <div class="card-deck">
                    <div class="col-sm-6 col-md-4">
                        <div class="card">
                            <img class="card-img-top fix-height" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=740&q=80" alt="Card image cap">
                            <div class="title1">
                                <h5 class="card-title m-auto">Card title</h5>
                            </div>
                        </div>
                    </div>

                <div class="col-sm-6 col-md-4">
                    <div class="card">
                        <img class="card-img-top fix-height"  src="https://images.unsplash.com/photo-1461151304267-38535e780c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=890&q=80" alt="Card image cap">
                        <div class="title1">
                            <h5 class="card-title m-auto">Card title</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-8 col-md-4">
                    <div class="card">
                        <img class="card-img-top fix-height" src="https://images.unsplash.com/photo-1546483875-ad9014c88eba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=674&q=80" alt="Card image cap">
                        <div class="title1">
                            <h5 class="card-title m-auto">Card title</h5>
                        </div>
                    </div>
                </div>

                </div> <!-- Card deck -->
            </div> <!-- Row -->
        </div> <!-- Container -->

CSS 

.fix-height{
height:190px;
}
...