在引导网格中使图像大小相同

Posted 2023-03-05

技术标签:

【中文标题】在引导网格中使图像大小相同【英文标题】：Make images the same size in bootstrap grid 【发布时间】：2018-01-04 21:23:36 【问题描述】：

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

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" >
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" >
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" >
        </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" >
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

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

            <img src="https://source.unsplash.com/NqE8Ral8eCE" >
          </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" >
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

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

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

【问题讨论】：

如果所有的图片都是不同的尺寸，那么如果你让它们的高度和宽度都一样，它们就会变形。您需要决定是否希望它们都具有相同的宽度或相同的高度。正如我所见，有 3 幅照片 y las 行您知道使用 flex 的 boostrap4 吗？ v4-alpha.getbootstrap.com/utilities/flexbox 因为您正在尝试使用 flex :) @ZimSystem 谢谢你提供的信息，我完全忘记了。 @GCyrillus，谢谢，我会查一下 【参考方案1】：

我想你要找的房产是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 和 contains 之间的差异以找到最小的对象大小。

object-fit | CSS-Tricks

【讨论】：

优秀的解决方案。这是否也适用于 Internet Explorer 等旧浏览器？【参考方案2】：

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

【讨论】：

【参考方案3】：

只需修改这个：

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

【讨论】：

【参考方案4】：

在浏览器中转到“检查元素”并查找类似的内容：

.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

【讨论】：

这会扭曲图像【参考方案5】：

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

如何决定列显示：一页分为12列网格，宽度计算为 宽度： 百分比（（@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>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。我已添加详细信息并仅使用引导网格更新了 sn-p。希望这会有所帮助

以上是关于在引导网格中使图像大小相同的主要内容，如果未能解决你的问题，请参考以下文章

具有固定包装器的引导网格 - 防止列堆叠

如何使用引导网格映射图像数组？

如何在引导网格上获得 5 个大小相等的列？

在gridster中使文本框大小相对于小部件大小

在引导程序中使列固定位置

用于小分辨率的引导图像网格