html - Bootstrap 图像缩略图大小不同

Question

我在 bootstrap 元素上工作，我尝试将上传图片设置为 GridView ，但上传图片大小不同 4 张图片大小不同，我将图片 width 和 高度 但它的不工作图像是素描并且不显示完整图像任何人都知道如何解决这个问题

谢谢,

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

添加类 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;
}