छवि केवल पृष्ठभूमि छवि नहीं होने पर छवि को उत्तरदायी बनाने के लिए कैसे करें?

Question

मैं इस लेआउट को उत्तरदायी बनाने की कोशिश कर रहा हूं। मेरी समस्या यह है कि छवियों की तरह अग्रभूमि पर हैं। मैंने पृष्ठभूमि स्थिति कवर के साथ प्रयास किया है, लेकिन काम नहीं किया। मैं इस

के लिए किसी भी जावास्क्रिप्ट का उपयोग करने की अपेक्षा की नहीं कर रहा हूँ नीचे बेला कड़ी है

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> 

सीएसएस:

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

अग्रिम धन्यवाद।

Answer 1

अब आप अपने वर्ग .main-storyimg

इस शैली

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

Answer 2

परिभाषित आप छवि के कंटेनर में एक अधिकतम-चौड़ाई निर्धारित करने की आवश्यकता तो 100% करने के लिए छवि चौड़ाई निर्धारित किया है। इस

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

img { 
    width:100%; 
} 

Answer 3

नमस्ते की तरह क्या आप मतलब है कि आप डिजाइन तरल पदार्थ, उत्तरदायी नहीं चाहता है, एक समाधान यहाँ की तरह प्रतिशत के रूप में चौड़ाई सेट करने के लिए है:

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

करने के लिए

ऐसा करें .sub-story { width: x%;} और .sub-story img { width: 100%;} जोड़ें। तो छवि .sub-story भर जाएगी जो अब उत्तरदायी है। आप सीएसएस में @media क्वेरी का उपयोग कर 33.33% या 50% या किसी अन्य मूल्य के लिए .sub-story की चौड़ाई समायोजित कर सकते हैं।

Answer 5

अरे इस सीएसएस को अपने सीएसएस कोड में बदलने की कोशिश करें।

और आकार बदलने के बाद आपको मीडिया प्रश्नों के अनुसार परिवर्तन चौड़ाई और फ़ॉन्ट आकार की आवश्यकता है।

जे एस फिडल लिंक: 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; 
}