在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中彼此相鄰的兩個圖像引導

回答

相關問題