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

在图像上添加类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 2

在代码 object-fit：cover; 中可能添加以下CSS

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

Answer 3

要使图像适合包含的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>

引导图像缩略图的大小不同

3 个答案: