與第一個孩子的圖像的響應高度

我做了一個腳本whoch從我的網站獲取最新消息，但現在我有設計問題。我不知道爲什麼，但我的height:auto不工作，我希望高度工作的寬度響應，但多數民衆贊成沒有發生。與第一個孩子的圖像的響應高度

也許我的想法不適用於height:auto，因爲有一個更大的圖像。我試圖用max-& min-高度做這個，但那也行不通。

我需要做這個響應的所有屏幕，我知道媒體的標籤，但在媒體我想寫一些小的修正:)

有我的代碼，也許有人可以幫助我！？

HTML

<div id="news"> 

<div id="new_post" style="background-image:url(http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-755.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div> 
<div id="new_post" style="background-image:url(http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-690.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div> 
<div id="new_post" style="background-image:url(http://wfiles.brothersoft.com/bd/android_189070-640x480.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div> 

</div>

CSS

#new_post{ 
    display: inline-block; 
    width: 50%; 
    height: auto; 
    margin:5px 5px 0 5px; 
    background-size: cover; 
background-position: center center; 
} 

#new_post:first-child{ 
    float: left; 
    width: 45%; 
    height: 205px; 
    margin: 5px 0 5px 5px; 
}

感謝。

來源

2016-06-15 Daniels Jirgensons

'高度：汽車;'獲取內容的價值，在這種情況下205px。如果要保持圖像寬高比，請使用'img'標記代替背景圖像。 – blonfu

@blonfu你認爲'div'我需要把'img'？ –

另外，你不應該使用重複的ID。決不。即使它似乎工作！ –

很難實現在任何元素中保持縱橫比，但是使用圖像非常容易。

.new_post { 
 
    display: inline-block; 
 
    width: 45%; 
 
    height: auto; 
 
    margin: 5px 5px 0 5px; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.new_post:first-child { 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.new_post:first-child a { 
 
    position: absolute; 
 
    top: 0 
 
} 
 

 
.new_post img { 
 
    width: 100%; 
 
}

<div id="news"> 
 

 
    <div class="new_post"><a href="" style="color:white">Lorem ipsum dolor sit amet</a><img src="http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-755.jpg"></div> 
 
    <div class="new_post" style="background-image:url(http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-690.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div> 
 
    <div class="new_post" style="background-image:url(http://wfiles.brothersoft.com/bd/android_189070-640x480.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div> 
 

 
</div>

來源

2016-06-15 11:16:10 blonfu

感謝這對我工作:) –

不客氣。 – blonfu

如果你想獲得的圖像，並讓您的網站，從這些網站上使用這個

<img src="http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-755.jpg" alt="Something about image" height="200" width="200">

來源

2016-06-15 11:03:42

看到這個：https://jsfiddle.net/psz7xw0n/18/

而是瞄準的第一個孩子，我有針對性的專區內的標籤並將其顯示爲內聯塊以便給它一個高度。

你試圖讓每個div都漂浮嗎？ 50％的div寬度加上保證金使其大於50％，因此他們只是堆疊起來。在這個例子中，我使用calc來從百分比中刪除邊距寬度。

#new_post{ 
width: calc(50% - 10px); 
float: left; 
height: auto; 
margin:5px 5px 0 5px; 
background-size: cover; 
background-position: center center; 
} 

#new_post a{ 
display: inline-block; 
height: 300px; 
margin: 5px 0 5px 5px; 
}

來源

2016-06-15 11:04:12

由於某種原因，第一個孩子似乎只針對第一個div的第一個孩子，但沒有休息。我不是專家，也不能告訴你爲什麼，我所知道的是，定位標籤可以將樣式應用於所有實例。 –

與第一個孩子的圖像的響應高度

回答

相關問題