使 bootstrap 中的图像缩略图彼此相邻且大小相同

Question

我正在制作一个网页，我想让 2 个图像缩略图以相同的高度彼此相邻显示。考虑我的 html 代码：

 <div class="row">
    <div class="col-md-6">
      <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" width="640px" height="480px">
    </div>
    <div class="col-md-6">
      <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" width="640px" height="480px">
    </div>
</div>

对应于它显示的输出中的给定代码（这只是输出的裁剪图像）：

我不明白为什么高度属性没有为两个图像分配相同的高度

这里的一个答案中所问的是 css 文件：

body{
 background-color: rgb(45,45,45);
}
.page-header{
 height: 100px;
 background-color: rgb(17, 17, 17);
 margin-top: 0px;
 margin-bottom: 0px;
}

#title{
 font-size:400%;
 color: white;
 font-family: 'Oswald', sans-serif;
}

.nav-button{
 margin-top:24px;
 margin-right:50px;
 margin-left:50px;
 width:110px;
 height:55px;  
 }

.btn h3{
 margin: 0 auto;
 font-family: 'Cabin', sans-serif;
}

.about{
 background-color: rgb(175, 187, 206);
 height:300px;
 font-size:16px;
}

.container{
 margin-top:0px;
}


.body-text{
 font-family:'Cabin', sans-serif;
 padding-top:60px;
 padding-left:25px;
 font-size:175%;
}
.my-image{
 height:280px;
 width:270px;
 padding-top:20px;
 padding-right:30px;
}


.portfolio{
 height: 1200px;
}

#portfolio-heading{
 padding-top: 30px;
 color: rgb(255,255,255);
}

Answer 1

我刚刚将您的代码放入一个新的 html 文件中，并对其进行了测试。两个图像的高度完全相同。我个人会检查您的样式表是否存在上述任何不一致的地方 classes/IDs，或者任何可能影响其大小的地方。

您可能想检查一下您的造型 'height:auto;' 等等。

我的建议是将 'overflow:hidden;' 放入您的样式表 "img-thumbnail" class.

为了能够成功地为您修复此问题，我们需要查看您的更多代码。

编辑：另外，我建议您检查一下哪个 div 的高度不正确。在 chrome 中，这可以通过检查元素（right-click > 检查元素）、导航到有问题的代码并将鼠标悬停在它上面来完成。这应该有望确定您的问题。

Answer 2

这可以使用 CSS 来完成：-

https://jsfiddle.net/Lrbw117q/1/

如果需要，您也可以内嵌背景图片。

#box1 {
  background-image: url('http://i.imgur.com/Ym35iJI.jpg');
  background-size: cover;
}

#box2 {
  background-image: url('http://i.imgur.com/ot6RubY.jpg');
  background-size: cover;
}

.img-thumbnail {
  height: 640px;
  width: 480px;
  border: 5px solid red;
}

Answer 3

您可以使用 flex 属性尝试演示

.outer , .outer div {
  display:flex;
}

<div class="row">
<div class="outer">  
    <div class="col-md-6 col-sm-6 col-xs-6">
      <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" width="640px" height="480px">
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
      <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" width="640px" height="480px">
    </div>
</div>  
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Answer 4

宽度和高度属性不适用于图像：

你应该这样做：

<div class="row">
    <div class="col-md-6">
      <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" style="widht: 640px; height:480px;" />
    </div>
    <div class="col-md-6">
      <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="widht: 640px; height:480px;">
    </div>
</div>

然而更好的做法是让你拥有 class:

<div class="row">
    <div class="col-md-6">
      <img class="myClass" src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" />
    </div>
    <div class="col-md-6">
      <img class="myClass" src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="widht: 640px; height:480px;">
    </div>
</div>

并使用以下代码创建 css-file：

.myClass { 
  width: 640px; 
  height: 480px;
}

但是我建议以下事情。使用编辑工具（即 Photoshop）预先确保您的图像大小相同，并使用 bootstrap.

标准的默认 img-responsive class

这将使您的网站响应速度更快，这是首选。

Answer 5

you can use this code:

div.col-md-6 {
    height:400px;
    position:relative;
    display:inline-block;
    overflow:hidden;
}

img.img-thumbnail {
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;
}

Answer 6

 <div class="row">
<div class="col-md-6">
  <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" style="height: 500px;background-size: cover;"/>
</div>
<div class="col-md-6">
  <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="height: 500px;background-size: cover;"/>
</div>

使 bootstrap 中的图像缩略图彼此相邻且大小相同

Make image-thumbnail in bootstrap adjacent to each other and identical in size

html

css

frontend

twitter-bootstrap