Css 引导中的缩略图类_Css_Html_Twitter Bootstrap 3

Css 引导中的缩略图类

css html twitter-bootstrap-3

Css 引导中的缩略图类,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,问题所以，我尝试在一行中匹配3个图像。每个图像都有不同的维度。因此，我尝试添加缩略图类，希望它可以使所有图像大小相同，但它只添加了边框，但从未更改图像大小我想要什么我希望所有的图像大小相同代码（由于所有图像都具有相同的代码，因此该代码用于一个图像）您可以这样做，应用宽度：100%和高度：自动到img 请参阅工作演示 img{ max-width: 100%; border: 1px solid red; width: 100%; height: 200px; /

问题

所以，我尝试在一行中匹配3个图像。每个图像都有不同的维度。因此，我尝试添加缩略图类，希望它可以使所有图像大小相同，但它只添加了边框，但从未更改图像大小

我想要什么

我希望所有的图像大小相同

代码

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

您可以这样做，应用

宽度：100%和<代码>高度：自动到img
请参阅工作演示
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>

img{
最大宽度：100%；
边框：1px纯红；
宽度：100%；
高度：200px；//根据需要调整
}
缩略图标记对某些图像的影响不同。这是因为某些图像的宽度大于高度（例如：480 x 670）。


图像库

不工作，由于某些原因，图像的大小仍然不相同。这就是整个网站。注意：我意识到森林图片缩小了，但是我忘了名字的东西没有被显示。codepen.io链接，你能更新它吗？
<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>