最初の子供がいる画像の反応的な高さ

Question

私のウェブサイトから最新のニュースを得るスクリプトを作ったが、今はデザインに問題がある。私は理由を知っていませんが、私のheight:autoはうまく動作せず、高さを幅に応じて動作させたいが、それは起こらない。

大きな画像が1つあるため、私の考えはheight:autoで動作しないかもしれません。私はこれをmax-&分の高さで作成しようとしましたが、それはどちらも機能しません。

私はすべての画面に対して行われ、この反応に必要

が、私はメディアタグについて知っているが、メディアでは、私は私のコードがありますいくつかの小さな修正:)

を書きたい、多分誰かが私を助けることができます！

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

感謝。

Answer 1

どの要素でもアスペクト比を維持するのが非常に難しくなりますが、画像は非常に簡単です。

.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>

Answer 2

あなたが画像を取得し、この

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

Answer 3

は、この参照してください使用し、それらのウェブサイトからあなたのサイトにそれを取得したい場合は、次の代わりに最初の子をターゲットのhttps://jsfiddle.net/psz7xw0n/18/

を、私はdiv要素内のタグをターゲットにそれに高さを与えるためにインラインブロックとして表示します。

各divをフロートさせようとしていましたか？ divの幅に50％を加え、マージンを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; 
}