Question

问题

所以，我试图连续放入3张图像。每张图片都有不同的尺寸。所以，我尝试添加缩略图类，希望它能使所有图像大小相同，但它只添加了边框，但从未改变图像大小。

我想要什么

我希望所有图像都相同。

代码

（代码用于一个图像，因为所有图像都具有相同的代码）

<div class="col-lg-4">
     <div class="thumbnail">
      <img src="https://images.unsplash.com/photo1423034816855245e5820ff8cdpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop="alt="Something in france!">
     </div>
</div>

Answer 1

您可以这样做，将width: 100%;和height: auto;应用于img

请参阅fiddle了解工作演示

img{
  max-width: 100%;
  border: 1px solid red;
  width: 100%;
  height: 200px;  // adjust it based on your need
}

<div class="row">

  <div class="col-md-4 col-sm-4">
    <img src="http://placehold.it/500x150" />
  </div>
  <div class="col-md-4 col-sm-4">
    <img src="http://placehold.it/100x50" />
  </div>
  <div class="col-md-4 col-sm-4">
    <img src="http://placehold.it/200x150" />
  </div>

</div>

Answer 2

某些图像受缩略图标记的影响不同。这是因为有些图像的宽度大于高度（例如：480 x 670）。 Example

<html lang="en">
<head>
    <title>Image Gallery</title>
    <link href="bootstrap.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="Image Gallery.css">
</head>
<body>
        <div class="row">
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1423034816855-245e5820ff8c?dpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop=" alt="Something in france!">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1441790844170-ec5dc89c7eae?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="A sad monkey">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1464039397811-476f652a343b?dpr=1&auto=format&fit=crop&w=1500&h=1003&q=80&cs=tinysrgb&crop=" alt="A forest!">
                </div>
            </div>
        </div>
    </div>
    <script src="bootstrap.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</body>

引导程序中的缩略图类

2 个答案: