在Bootstrap网格中使图像大小相同

Question

在Bootstrap网格中使图像大小相同

htmlcsstwitter-bootstrapimagebootstrap-grid

19

我正在使用Bootstrap网格系统创建一个包含3行的图像库，每行都包含3个图像。所有的图像大小都不同。我想做的是让所有的图像大小相同。

我尝试在我的CSS中使用max-height或max-width，但它并没有帮助我使所有的缩略图大小相似。

我应该只是摆脱thumbnail类还是有其他解决方案？

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>

- Jacob Murin

如果所有的图片尺寸都不同，那么如果你将它们的高度和宽度都设置为相同的值，它们就会变形。你需要决定是让它们的宽度相同，还是让它们的高度相同。 - Carol Skelly

我看到有3张照片和一行。 - Álvaro Touzón

你知道Bootstrap4使用Flex吗？https://v4-alpha.getbootstrap.com/utilities/flexbox/，因为你正在尝试使用Flex :) - G-Cyrillus

@ZimSystem 谢谢你提供的信息，我完全忘记了。 - Jacob Murin

@GCyrillus，谢谢，我会查一下的。 - Jacob Murin

6个回答

3

将css类img-responsive添加到每个图像中。

- Chris Cousins

0

在浏览器中打开“检查元素”并搜索类似于：

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto; }

将其更改为：

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: 300px; //change as per your requirement }

- Dushyant Surya

1

这会扭曲图像。 - molerat

0

只需修改这个：

img {
    width: 100px; // how much you want
    min-height: 100px;
    float: left;
    margin: 10px;
}

- Shark

0

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。顶层是Container，它下面显示行和列。在Bootstrap中，有4个类： xs（适用于小屏幕手机-屏幕宽度小于768像素） sm（适用于平板电脑-屏幕宽度等于或大于768像素） md（适用于小型笔记本电脑-屏幕宽度等于或大于992像素） lg（适用于笔记本电脑和台式机-屏幕宽度等于或大于1200像素）

如何决定列的显示：页面被分成12列网格，并计算宽度 width: 百分比((@columns / @grid-columns)); 1列/ 12个网格列=8.33%* 1170px = 97.5px 由于没有部分像素，因此浏览器将四舍五入数字。 col-md-2 - 将在一行中显示6张图像。2表示显示一个图像所需的2列。 col-sm-12 - 该类可帮助在小设备上堆叠图像 .img-center - 是自定义类，用于定义图像框的附加属性希望这有所帮助。

.img-center {
  text-align: center; 
  border-radius: 8px;
  width: 100px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
  display: flex;
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="EightImages.css" />
    <link rel="images" href="images" />
    <link rel="stylesheet" href="css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />
          <p>
            Test
          </p>
        </div>
        <div class="col-sm-12 col-md-2">
          <img
            class="img-fluid img-center"
            src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
          />

          <p>
            Test
          </p>
        </div>
      </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

- Radha

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。 - Maximouse

我已经添加了详细信息并仅使用Bootstrap网格更新了片段。希望这可以帮助到您。 - Radha

0

根据Dushyant Surya的评论，尝试这样做：

我添加了两个额外的规则让图片更漂亮。顺便说一句，因为我还没有声誉积分，所以无法发表评论。但对我来说，这个方法很好用！

.thumbnail a>img, .thumbnail>img {
  display: block;
  width: 100%;
  height: 250px;
  // but add these to make your images prettier and keep the quality.
  object-fit: cover;
  image-resolution: from-image;
}

- pgm-jefdenie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- natejms · Accepted Answer

我认为你正在寻找的属性是object-fit

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

object-fit属性的作用类似于在背景图片上使用background-size: cover，使其填充页面而不会拉伸变形。这样，您可以定义一个规则中的宽度，以确保所有图像都遵循相同的大小，而不会扭曲您的图片。

您可以与此属性一起使用的其他值包括：

fill - 拉伸图像。
contain - 保留图像的纵横比。
cover - 填充盒子的高度和宽度。
none - 保持原始大小。
scale-down - 将none和contain之间的差异进行比较，以找到最小的对象大小。

object-fit | CSS-Tricks