Question

我正在使用Bootstrap，我的行中有3列，其中列中的图片我将width和height的图片设置为100%并且我＆＃ 39;即使所有原始图片具有相同的宽度和高度，每个列的大小也不同

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row special-row" style="box-sizing: border-box;">
    <div class="col-md-12 intrinstic" style="margin-bottom:1%;"><img src="src" />
    </div>
    <!-- /top-pic -->

    <div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

    <div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

    <div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

    <div class="col-md-6"><img alt="earring" src="src" style="max-height:100%; max-width:100%" /></div>

    <div class="col-md-6"><img alt="earring" src="src" style="max-height:100%; max-width:100%" /></div>

    <div class="col-md-12 intrinstic" style="margin-top:1%;"><img src="src" /></div>
  </div>

  <div class="row">
    <div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>
    <div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>
    <div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>

  </div>
</div>

＆＃13;

我的问题是最后3列有不同的高度。

编辑：我正在使用Drupal，因此这段代码位于带有container类的bootstrap div中。

Answer 1

您遇到的问题是您使用的图片尺寸不同。

如果以百分比形式使用高度，则只有在容器具有已定义的高度时才会考虑高度，但实际情况并非如此。这意味着应用了默认高度行为。这意味着图像将保持其比例，并根据设定的宽度定义高度。

所以这里发生的是你定义3个图像具有完全相同的宽度（所有100％的col-md-4），但由于它们没有相同的高/宽比，它们的高度不同。 / p>

现在找到解决这类问题的方法：你可以将图片用作背景图片，CSS背景提供了不同的方法来处理他们如何调整大小，你可以轻松地实现相同高度的相同宽度设计，并使用规则自动截断溢出部分。

您也可以强制高度，但这会拉伸您的图像。您也可以手动调整它们的大小，以确保它们的大小相同，这将为您提供最佳控制，但耗时。

Answer 2

Row和col-md-4类没有确定的大小，所以你需要为col-md-4 div设置一定的高度。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Cats</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
<style>
    .cats div {
        height: 300px;
    }
    .cats div img{
        padding: 5px;
        height: 100%;
    }
</style>
<div class="container">

  <div class="row cats">
    <div class="col-md-4"> <img class="img img-responsive" src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" style="height:100%;" /> </div>
    <div class="col-md-4"> <img  class="img img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/7a/ac/e7/7aace71b62fb8ec8de6d4ec650185747.jpg" style="height:100%;" /> </div>
    <div class="col-md-4"> <img class="img img-responsive" src="http://www.warrenphotographic.co.uk/photography/bigs/38089-Tabby-male-cat-portrait.jpg" style="height:100%;" /> </div>
  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
</body>
</html>

尝试阅读此stackoverflow答案： here

正如您将看到运行此html片段一样，所有img父div都具有相同的高度，img将填充div高度。

Answer 3

您需要删除图像的width: 100%，并且列的高度相等。 Fiddle

Answer 4

你必须注意，在bootstrap中由于某种原因它除以12列，并且它具有相应的列数，例如col-md-4占用4列。因此，如果您将图像放到col-md-4并将图像放入col-md-6中，它会有所不同，它会有不同的大小。我建议只使用100％的高度来保持宽高比。

div有不同的高度

4 个答案: