set img src can not fit div

Question

Hi I am learning RWD and want to show images inside table

First time, I set src to img at the beginning and it works fine.

fiddle1

<div class="outter">
<div class="wrapper-1x1">
    <div class="inner">
        <img class="element-to-stretch" src="http://lorempixel.com/400/400/cats/" />
    </div>
</div>
<div class="wrapper-1x1">
    <div class="inner">
        <img class="element-to-stretch" src="http://lorempixel.com/800/400/cats/" />
    </div>
...
</div>

Second time, I didn't set src in html tag. I tried to set it via javascript but the image will overflow.

fiddle2

<div class="outter">
<div class="wrapper-1x1">
    <div class="inner">
        <img class="element-tostretch" id="img1" />
    </div>
</div>
<div class="wrapper-1x1">
    <div class="inner">
        <img class="element-tostretch" id="img2" />
    </div>
</div>

document.getElementById('img'+i).src = "http://lorempixel.com/400/400/cats/";

Both of them use the same css

How to make the second one works fine?

Thanks

Answer 1

You have a spelling mistake, element-tostretch

for (var i = 1; i <= 12; i++) {
  document.getElementById('img'+i).src = "http://lorempixel.com/400/400/cats/";
}

/* For portrait, we want the tool bar on top */

@media screen and (orientation: portrait) {
    .outter {
        width: 80%;
        height: 0;
        padding-bottom: 60%;
        background-color: silver;
        margin: auto;
    }
}

/* For landscape, we want the tool bar stick on the left */

@media screen and (orientation: landscape) {
    .outter {
        width: 70%;
        height: 0;
        padding-bottom: 52.5%;
        background-color: silver;
        margin: auto;
    }
}

.wrapper-1x1 {
    width: 25%;
    float: left;
}

.wrapper-1x1 .inner {
    position: relative;
    padding-bottom: 100%;
    height: 0;
}

.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    display: block;
    height: auto;
}

<div class="outter">
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img1" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img2" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img3" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img4" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img5" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img6" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img7" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img8" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img9" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img10" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img11" />
        </div>
    </div>
    <div class="wrapper-1x1">
        <div class="inner">
            <img class="element-to-stretch" id="img12" />
        </div>
    </div>
    </div>

Answer 2

You have a spelling mistake in your class on the 2nd code.

Class = tostretch, and your style = to-stretch (hyphen)

<img class="element-tostretch" id="img10" />

.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    display: block;
    height: auto;
}