在引导网格中使图像大小相同 [英] make images the same size in bootstrap grid

问题描述

我正在使用Bootstrap网格系统创建一个包含3行的图像库，每行包含3张图像。所有图像都有不同的尺寸。我想做的是使所有图像大小相同。
我尝试在CSS中使用max-height或max-width，但是并没有使所有图像（缩略图）的大小相似。
我应该只使用缩略图类还是其他解决方案？

I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size. I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size. Should I just get rig of the thumbnail class or is there another solution?

body {
      padding-top: 70px;}
    .row .flex {
     display: inline-flex;
     width: 100%;}
    img {
     width:100%;
     min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
        </div>
      </div>

      <div class="row match-to-row">
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/63JKK67yGUE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
          </div>
        </div>

        <div class="row flex match-to-row">
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
            </div>
          </div>
    </div>
  </div>

推荐答案

我认为您要查找的属性是 object-fit

I think the property you're looking for is object-fit

img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

对象拟合属性的工作方式与在背景图片上使用 background-size：cover 的方式相似，以使其填充页面而不会拉伸。这样，您可以在规则中定义一个宽度，所有图像都将遵循该规则，以确保它们的大小相同而不会扭曲您的图片。

The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.

其他可与之配合使用的值此属性包括：

Other values you can use with this property includes:

• 填充-拉伸图像。


• 包含-保留图像的长宽比。


• 封面-填充框的高度和宽度。


• 无-保持原始大小。


• 缩小-比较无和包含之间的差异，以找到最小的对象大小。

• fill - stretch the image.
• contain - preserve the aspect ratio of the image.
• cover - Fill the height and width of the box.
• none - Keep the original size.
• scale-down - compare the differences between none and contain to find the smallest object size.

对象拟合| CSS技巧

这篇关于在引导网格中使图像大小相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！