How to make image responsive using CSS only when the image is not a background image?

Question

I am trying make this layout responsive. The problem I am having is like the images are on foreground. I've tried with background position cover, but did'nt work out. I am not supposed to use any javascript for this

Below is the fiddle link

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:

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

Thanks in advance..

Answer 1

Now define your class .main-story img

this style

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

Answer 2

You need to set a max-width in the container of the image then set the image width to 100%. like this

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

img {
    width:100%;
}

Answer 3

hello what you mean is that you want the design fluid, not responsive, one solution is to set the width as percent like here:

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

To do that add .sub-story { width: x%;} and .sub-story img { width: 100%;} . So the image will fill the .sub-story which is now responsive. You can adjust the width of the .sub-story to 33.33% or 50% or any other value using the @media query in CSS.

Answer 5

Hey try this replace this css to your css code.

and after resizing you need change width and font size according to media queries.

JS Fiddle Link:

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