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

0sgqnhkj 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(6)|浏览(190)

我创建了一个3行的图片库，每行包含3张图片，使用Bootstrap网格系统。所有的图像都有不同的大小。我想做的是让所有的图像都是相同的大小。我尝试在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" 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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/45379727/make-images-the-same-size-in-bootstrap-grid

6条答案

按热度按时间

l7wslrjt1#

我想你要找的房产是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

赞(0）回复(0）举报 2023-06-20

shyt4zoc2#

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

赞(0）回复(0）举报 2023-06-20

rqenqsqc3#

只需修改以下内容：

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

赞(0）回复(0）举报 2023-06-20

o7jaxewo4#

转到浏览器中的“检查元素”，并查找以下内容：

.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 }

赞(0）回复(0）举报 2023-06-20

h9vpoimq5#

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。顶层是Container，行和列显示在其下。在Bootstrap中，有4个类xs（用于手机-屏幕小于768px宽）sm（用于平板电脑-屏幕等于或大于768px宽）md（用于小型笔记本电脑-屏幕等于或大于992px宽）lg（用于笔记本电脑和台式机-屏幕等于或大于1200px宽）
如何决定列显示：页面划分为12列网格，宽度计算为width：percentage（（@columns/@grid-columns））; 1 column/12 grid-columns = 8.33% 1170px = 97.5px没有部分像素，所以浏览器会对数字进行舍入。 * col-md-2-将连续显示6张图像。2表示2列显示图像

- col-sm-12**-在小型设备上打开时，Class将有助于堆叠映像
. 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>

赞(0）回复(0）举报 2023-06-20

beq87vna6#

正如Dushyant Surya评论的那样，试试这个：
我添加了2个额外的规则，使img漂亮。我不能发表评论，因为我还没有声望。但这对我来说很好用！

.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;
}

赞(0）回复(0）举报 2023-06-20

我来回答

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

6条答案

相关问题

热门标签

最新问答