Görüntü yalnızca arka plan görüntüsü olmadığında CSS kullanarak görüntüyü nasıl duyarlı hale getirir?

Question

Bu düzeni yanıt vermeye çalışıyorum. Yaşadığım problem, resimler ön planda. Arka plan pozisyon kapağında denedim ama işe yaramadı. Bu

için herhangi javascript kullanmak gerekiyordu değilim Aşağıda keman bağlantıyı olan

http://jsfiddle.net/6jhx7du6/

HTML:

<div class="page-wrap"> 
    <h1>Make This Responsive</h1> 

    <p>While maintaining the heirarchy of importance.</p> 
    <article class="main-story"> 
     <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking" /> 
     <div class="story-intro"> 
      <h1>Most Important Story</h1> 

      <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a> 

      </p> 
     </div> 
    </article> 
    <section class="sub-stories"> 
     <article class="sub-story"> 
      <img src="http://placekitten.com/250/350" /> 
      <div class="story-intro"> 
       <h2>Less Important Story</h2> 

       <p>This story has less visual weight.</p> 
      </div> 
     </article> 
     <article class="sub-story"> 
      <img src="http://placecage.com/250/350" /> 
      <div class="story-intro"> 
       <h2>Less Important Story</h2> 

       <p>This story has less visual weight.</p> 
      </div> 
     </article> 
     <article class="sub-story last"> 
      <img src="http://placebear.com/250/350" /> 
      <div class="story-intro"> 
       <h2>Less Important Story</h2> 

       <p>This story has less visual weight.</p> 
      </div> 
     </article> 
    </section> 
</div> 

CSS: önceden

* { 
    box-sizing: border-box; 
} 
.page-wrap { 
    width: auto; 
    margin: 20px auto; 
} 
.main-story { 
    position: relative; 
    margin: 0 0 25px 0; 
} 
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 
a { 
    color: lightblue; 
} 
.story-intro { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.75); 
    padding: 20px; 
    color: white; 
} 
h1 { 
    font-size: 4em; 
} 
h1, h2 { 
    margin: 0 0 10px 0; 
} 
.story-intro h1 { 
    font-size: 2.5em; 
} 
.story-intro p { 
    margin: 0; 
} 
.sub-stories { 
    overflow: hidden; 
    margin: 0 0 25px 0; 
} 
.sub-story { 
    float: left; 
    width: 250px; 
    margin-right: 25px; 
    position: relative; 
    font-size: 80%; 
} 
.last { 
    margin-right: 0; 
} 

teşekkürler.

Answer 1

Şimdi Daha sonra% 100'e görüntü genişliğini ayarlamak görüntünün kapta bir max-width ayarlamanız gerekir .main-storyimg

bu tarz

.main-story > img{ 
width:100%; 
} 

Answer 2

sınıf tanımlar. Bu

.sub-story { 
    float: left; 
    max-width: 250px; 
    margin-right: 25px; 
    position: relative; 
    font-size: 80%; 
} 

img { 
    width:100%; 
} 

Answer 3

merhaba gibi ne demek Duyarlı değil tasarım sıvısı, istememizdir, bir çözüm burada gibi yüzde genişliğini ayarlamak içindir: To

http://jsfiddle.net/6jhx7du6/1/

.sub-stories { 
    overflow: hidden; 
    margin: 0 0 25px 0; 
    max-width:800px; 
} 
.sub-story { 
    float: left; 
    width: 31%; 
    margin-right: 3.5%; 
    position: relative; 
    font-size: 80%; 
} 

Answer 4

Bu .sub-story { width: x%;} ve .sub-story img { width: 100%;} ekleyin. Bu nedenle görüntü, şimdi yanıt veren .sub-story'u dolduracaktır. CSS içinde @media sorgu kullanılarak 33.33% veya % 50 veya başka bir değer .sub-story genişliğini ayarlayabilir.

Answer 5

Bu css kodunuzu bu css ile değiştirin.

ve yeniden boyutlandırmadan sonra medya sorgularına göre genişlik ve yazı tipi boyutunu değiştirmeniz gerekir.

JS Fiddle Bağlantı:% 100:

http://jsfiddle.net/abidkhanweb/r97d1w64/

* { 
    box-sizing: border-box; 
} 
.page-wrap { 
    width: auto; 
    margin: 20px auto; 
} 
.main-story { 
    position: relative; 
    margin: 0 0 25px 0; 
} 
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    width:100%; 
} 
a { 
    color: lightblue; 
} 
.story-intro { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.75); 
    padding: 20px; 
    color: white; 
} 
h1 { 
    font-size: 4em; 
} 
h1, h2 { 
    margin: 0 0 10px 0; 
} 
.story-intro h1 { 
    font-size: 2.5em; 
} 
.story-intro p { 
    margin: 0; 
} 
.sub-story img{ 
    width:100%; 
    height:auto; 
} 
} 
.sub-stories { 
    overflow: hidden; 
    margin: 0 0 25px 0; 
} 
.sub-story { 
    float: left; 
    width: 32%; 
    margin-right: 2%; 
    position: relative; 
    font-size: 80%; 
} 
.last { 
    margin-right: 0; 
}