设置 img src 不能适合 div答案

【问题标题】：set img src can not fit div设置 img src 不能适合 div
【发布时间】：2016-02-03 09:42:55
【问题描述】：

您好，我正在学习 RWD，想在表格中显示图像

第一次，我一开始就将src设置为img，效果很好。

<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

如何使第二个工作正常？

谢谢

【问题讨论】：

您好，请记得将相关答案标记为已接受。

标签： javascript html css responsive-design

【解决方案1】：

您在第二个代码的班级中有拼写错误。

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

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

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

【讨论】：

【解决方案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>

【讨论】：