Question

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

这是我目前的代码：

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

任何帮助都非常有用！

Answer 1

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

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

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

Answer 2

我想你想让它们具有相同的高度。因此，如果它们具有相同的宽度/高度比例，它们也将具有相同的宽度，如果不是，它们至少在行中具有相同的高度。（如果它们具有相同的高度和宽度，但是不同的高度/宽度比例，一个或两个将会扭曲！）。使用此CSS：

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

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

Answer 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来完成你想要做的事情。

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

在html，bootstrap中彼此相邻的两个图像

3 个答案: