使引导程序中的图像缩略图彼此相邻且大小相同答案

【问题标题】：Make image-thumbnail in bootstrap adjacent to each other and identical in size使引导程序中的图像缩略图彼此相邻且大小相同
【发布时间】：2017-01-14 11:29:18
【问题描述】：

我正在制作一个网页，我想让 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>

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

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

这里的答案之一是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);
}

【问题讨论】：

只是我看到你覆盖了 CSS 中的图像高度。如果您将宽度/高度设置为样式游览 img 标签，就可以了！ `

标签： html css twitter-bootstrap frontend

【解决方案1】：

这可以使用 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;
}

【讨论】：

所以用这个我也可以改变缩略图的边框颜色？

【解决方案2】：

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

您可能需要检查您的样式 '高度：自动;' 之类的。

我的建议是放置一个 'overflow:hidden;'进入你的样式表“img-thumbnail”类。

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

编辑：另外，我可能建议您检查一下哪个 div 的高度不正确。在 chrome 中，这可以通过检查元素（右键单击 > 检查元素）、导航到相关代码并将鼠标悬停在其上来完成。这应该有望解决您的问题。

【讨论】：

【解决方案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">

【讨论】：

【解决方案4】：

width 和 height 属性不适用于图像：

你应该这样做：

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

然而，更好的做法是让你拥有自己的班级：

<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 文件：

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

不过，我建议以下内容。使用编辑工具（例如 Photoshop）预先确保您的图像具有相同的大小，并使用引导程序标配的默认 img-responsive 类。

这将使您的网站更具响应性，这是首选。

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案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>

【讨论】：