小编cod*_*rMe的帖子

使用CSS弹性盒模型,如何强制图像保持其纵横比？

JS小提琴 http://jsfiddle.net/xLc2Le0k/2/

请注意,图像会拉伸或缩小以填充容器的宽度.那很好,但我们是否可以拉伸或缩小高度以保持图像比例？

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

我有以下字符串:

var songlist = '<div class="list-item" id="57902ccae53fa51716424034"><div class="media"><img src="{imgsrc}" alt="Mama Tried" /></div><h4 class="title">Mama Tried</h4><div class="song-controls"><button class="song play"><span class="fa fa-play"></button></div></div><div class="list-item" id="57902cddae7b54e264fcc6e4"><div class="media"><img src="{imgsrc}" alt="Blue Eyes Crying In the Rain" /></div><h4 class="title">Blue Eyes Crying In the Rain</h4><div class="song-controls"><button class="song play"><span class="fa fa-play"></button></div></div>';

我通过这个自定义函数转换为NodeList:

var toDom = function(str) {
  var tmp = document.createElement("div");
  tmp.innerHTML = str;
  return tmp.childNodes;
};

console.log(toDom(songlist))输出NodeList [ <div#57902ccae53fa51716424034.list-item>, <div#57902cddae7b54e264fcc6e4.list-item> ],您可以浏览devtools.

当我尝试将集合追加到节点时...

document.getElementById("app-data").appendChild(toDom(songlist));

我知道TypeError: Argument 1 of Node.appendChild does not implement interface Node.哪个是奇怪的,因为说明参数1 的 …