设置img src不能适合div

Question

您好我正在学习RWD并希望在表格中显示图像

第一次，我在开始时将src设置为img并且工作正常。

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>

第二次，我没有在html标签中设置src。我试图通过javascript设置它，但图像将溢出。

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/";

他们都使用相同的CSS

如何使第二个工作正常？

由于

Answer 1

你的班级在第二段代码上有拼写错误。

Class = tostretch，你的style = to-stretch（连字符）

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

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

Answer 2

您的拼写错误为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>