Question

我正在创建一个网页，其中我想让2个图像缩略图以相同的高度彼此相邻。考虑我的HTML代码：

{{1}}

对应于输出中的给定代码（这只是输出的cropimage）：

我无法理解为什么height属性不会为图像分配相同的高度

正如其中一个答案中提到的那样是css文件：

{{1}}

Answer 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;
}

Answer 2

我只是将您的代码放入一个新的html文件中，然后对其进行测试。两个图像都具有完全相同的高度。我个人会检查您的样式表中是否存在任何提及的类/ ID中的任何不一致，或者任何可能影响其大小的内容。

您可能需要检查自己的样式 “高度：汽车;” 等等。

我的建议是放一个'溢出：隐藏;'进入样式表“img-thumbnail”类。

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

编辑：另外，我建议您检查哪个div是不正确的高度。在chrome中，可以通过检查元素（右键单击＆gt; inspect元素），导航到相关代码并将鼠标悬停在它上面来完成。这应该有希望确定您的问题。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

更好的做法是让你自己上课：

<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）确保您的图像具有相同的大小，并使用标准为bootstrap的默认img-responsive类。

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

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

create table #t
(
    ItemName varchar(50),
    Price decimal(18,2),
    CreatedDateTime datetime
);

set dateformat ymd;

insert into #t values('New Card', 50.00, '2014-05-26 19:17:09.987');
insert into #t values('Recharge', 110.00, '2014-05-26 19:17:12.427');
insert into #t values('Promo', 90.00, '2014-05-27 16:17:12.427');
insert into #t values('Membership', 70.00, '2014-05-27 16:17:12.427');
insert into #t values('New Card', 50.00, '2014-05-26 19:20:09.987');

with cte as
(
    select datepart(hh, CreatedDateTime) as [Hour], 
        ItemName,
        Price,
        sum(Price) over (partition by datepart(hh, CreatedDateTime)) SaleAmount,
        ROW_NUMBER() over (partition by datepart(hh, CreatedDateTime) order by Price desc) rn
    from #t
)
select Hour, 
    SaleAmount,
    ItemName
from cte
where rn = 1

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

6 个答案: