在html中彼此相邻的两个图像引导

我是一个HTML工作的新手，我有两个不同大小的图像，我试图将它们并排放在同一行上，使用html和bootstrap。在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%; 
    }

任何帮助大大apreciated！

来源

2017-03-15 arziankorpen

图像的大小是否相同？ – codingpirate

我想你想拥有它们相同的高度。因此，如果它们具有相同的宽度/高度比率，则它们也将具有相同的宽度，如果不是这样，则它们在该行中至少具有相同的高度。（如果它们具有相同的高度和宽度，但具有不同的高度/宽度比率，则其中一个或两个会变形！）。请使用以下CSS：

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

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

来源

2017-03-15 21:43:54 Johannes

-1

我做这个的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实现什么你正在努力去做。

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

来源

2017-03-15 19:59:01 Moose

OP希望图像的方形大小相同。 – sparta93

感谢您的输入，但是，作为sparta93评论，在您的示例中图像不是相同的大小并排。我的图片也看起来像你的例子中的图片。 – arziankorpen

@arziankorpen，只需在图像元素上使用CSS'background-size：cover'或'background-size：contains'以及固定的高度（你也可以明显地使用CSS），你就完成了。 – Moose

试试这个CSS。你基本上需要设置宽度为100%，你已经完成了，然后给他们一个固定的height，所以他们都是相同的大小。检查下面的小提琴。

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

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

来源

2017-03-15 19:59:25 sparta93

谢谢。但是，我看到你做了什么，但在你的例子中，这也发生在我身上，图像看起来扭曲。这是否意味着它是一个图像问题？即我的图像是否应具有相同的尺寸和质量？ – arziankorpen

@arziankorpen是的，它是一个解决问题。 – sparta93

在html中彼此相邻的两个图像引导

回答

相关问题