Миниатюра изображения Bootstrap имеет разный размер

Question

Я работаю над проектом начальной загрузки, и я пытаюсь поместить загружаемое изображение, чтобы установить вид сетки, но загружаемое изображение не того же размера. 4 изображения имеют разный размер, я помещаю изображение width и height, но оно не работает. изображение набрасывается и не отображает полное изображение любой знает, как решить эту проблему

Спасибо ,

/*image*/
.thumbnail{
  width: 164px;
  height: 164px;
  overflow: hidden;
  margin: auto;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

                  <div class="row display-flex">
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg"  alt="" class="avatar">

                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">

                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="avatar">

                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">

                      </div>
                    </div>
                  </div>

Answer 1

Чтобы изображения поместились в содержащий div, добавьте к ним класс img-fluid. Это даст им width: 100%; height: auto;.

Это не даст им одинаковую высоту, поскольку они имеют разные размеры / пропорции.

/*image*/
.thumbnail{
  width: 164px;
  height: 164px;
  overflow: hidden;
  margin: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

                  <div class="row display-flex">
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg"  alt="" class="img-fluid avatar">
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="img-fluid avatar">
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3">
                      <div class="thumbnail">
                        <img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
                      </div>
                    </div>
                  </div>

Answer 2

Добавить класс img-fluid на изображение.

Как это

<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid">

или обновить следующий CSS:

.thumbnail img {
    width: 100%;
    height: auto;
}

Answer 3

Добавьте следующие Css к коду Подгонка объекта: обложка; Может помочь вам

.thumbnail
{
      width: 164px;
      height: 164px;
      overflow: hidden;
       margin: auto;
}
.thumbnail img {
    width: 164px;
    height: 100%;
    object-fit: cover;
}