html，引导程序中彼此相邻的两个图像答案

【问题标题】：Two images next to each other in html, bootstraphtml，引导程序中彼此相邻的两个图像
【发布时间】：2017-03-16 05:43:54
【问题描述】：

我是一个使用 HTML 的新手，我有两个不同大小的图像，我试图将它们并排放在同一行，使用 html 和引导程序。

这是我当前的代码：

  <div class="row">
  <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
    <img src="https://x1" alt="logo"
         id="logo"> 
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
    <img src="https://x2" alt="ex" id="img2">
    </div>
   </div>

它们并排显示，但尺寸不同，我应该如何调整它们的大小，以便它们适合两个方形图像并排放置。这是我影响图像的CSS：

img{
      margin-top:25px;
      width:100%;
    }

非常感谢任何帮助！

【问题讨论】：

图片大小一样吗？

标签： jquery html css twitter-bootstrap

【解决方案1】：

试试这个 CSS。您基本上需要将宽度设置为您已经完成的100%，然后给它们一个固定的height，因此它们的大小相同。检查下面的小提琴。

JSFiddle - https://jsfiddle.net/su16pzqc/

img{
      margin-top:25px;
      width:100%;
      height: 400px;
    }

【讨论】：

谢谢。我看到你做了什么，但是，在你的例子中，这也发生在我身上，图像看起来扭曲了。这是否意味着这是一个图像问题？即我的图像应该已经具有相同的大小和质量吗？
@arziankorpen 是的，这是一个解决问题。

【解决方案2】：

我想您希望它们具有相同的高度。因此，如果它们具有相同的宽度/高度比率，它们也将具有相同的宽度，如果不是，它们至少在行中具有相同的高度。（如果它们具有相同的高度和宽度，但高度/宽度比率不同，则其中之一或两者都会失真！）。为此使用此 CSS：

img {
  height:100%;
  width: auto;
}

注意：父元素需要有一个高度定义才能工作。

【讨论】：

【解决方案3】：

我用您的代码制作了这个 JSFiddle 示例：

https://jsfiddle.net/onjaL3bu/1/

HTML：

<div class="row">
  <div class="col-xs-6">
    <img src="http://lorempixel.com/400/200" alt="logo" id="logo"> 
  </div>
  <div class="col-xs-6">
    <img src="http://lorempixel.com/600/400" alt="ex" id="img2">
  </div>
</div>

CSS：

img{

}

你不需要使用任何 CSS 来完成你想要做的事情。

另外，你应该看看我使用的类。你使用的类太多了。

【讨论】：

OP 希望图片在正方形中的大小相同。
感谢您的输入，但正如 sparta93 评论的那样，在您的示例中，图像并排的尺寸不同。我的图像也看起来像您示例中的图像。
@arziankorpen，只需在图像元素上使用 CSS background-size:cover 或 background-size:contain 以及固定高度（显然您也可以使用 CSS），您就可以完成了。