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

Question

提问by Jacob Murin

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?

我正在使用 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" 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>

Answer 1

回答by natejms

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

我认为你正在寻找的财产是 object-fit

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

The object-fitproperty works similarly to how you would using background-size: coveron 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.

该object-fit属性的工作方式类似于您background-size: cover在背景图像上使用的方式，使其在不拉伸的情况下填充页面。这样，您可以在所有图像将遵循的规则中定义宽度，以确保它们的大小相同而不会扭曲您的图片。

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.

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

object-fit | CSS-Tricks

适合对象 | CSS 技巧

Answer 2

回答by Chris Cousins

Add the css class img-responsive to every image.

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

Answer 3

回答by Shark

just modify this:

只需修改这个：

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

Answer 4

回答by Radha

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it. In Bootstrap, there are 4 classes xs(for phones - screens less than 768px wide) sm(for tablets - screens equal to or greater than 768px wide) md(for small laptops - screens equal to or greater than 992px wide) lg(for laptops and desktops - screens equal to or greater than 1200px wide)

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

How to decide on column display: A page is divided into 12columns grid and width is calculated as width:percentage((@columns / @grid-columns)); 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px there are no partial pixels so browsers rounds the number. col-md-2- Will display 6 images in a row. 2 means 2 columns to display an image

如何决定列显示：一个页面被分成12列网格，宽度计算为宽度：百分比(( @columns / @grid-columns)); 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px 没有部分像素，所以浏览器会四舍五入这个数字。 col-md-2- 将连续显示 6 个图像。2 表示 2 列显示图像

col-sm-12- Class will help in stacking the image when opened on small devices

col-sm-12- 在小型设备上打开时，类将有助于堆叠图像

.img-center- Is custom class to defined additional properties for the image box Hope this helps.

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

Answer 5

回答by Dushyant Surya

Go to "Inspect Element" in your browser and look for something like:

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

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

Change it to:

将其更改为：

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

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

提问by Jacob Murin

回答by natejms

回答by Chris Cousins

回答by Shark

回答by Radha

回答by Dushyant Surya

相关推荐

最近更新

标签

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

提问by Jacob Murin

回答by natejms

回答by Chris Cousins

回答by Shark

回答by Radha

回答by Dushyant Surya

相关推荐

Html HTML5 电子邮件验证

Html 新行“\n”在打字稿中不起作用

Html 将字体导入 angular 4 cli web 应用程序的最佳实践/样式

Html 使输入中每个单词的第一个字符大写

相关推荐

最近更新

标签