javascript - 如何将图片放入Html中的列表中

Question

我怎样才能把图片放在 CSS 中给定的正确大小，并且这张图片应该适合一个元素列表，其中每个元素都有一个图片和一个名称。我的代码将仅显示原始尺寸的图片。

 for(var i =0; i< obj.length; i++){
            item = document.createElement("li"); 
              let img = document.createElement("img");
              img.src = obj[i].imagePath;
              item.appendChild(img);
              theList.appendChild(item);
              }

.bird-gallery {
    display: block;
    float: left;
    width: 300px;
    height: 600px;
    margin: 1em;
    overflow: hidden
}

.bird-gallery .bird-list {
    width: 280px;
    height: 100%;
    list-style-type: none;
    margin: 25px 0;
    padding: 0;
    overflow-y: auto
}

.bird-gallery .bird-image {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0;
    float: left;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF
}

.bird-gallery .bird-name {
    display: block;
    font-size: 24px;
    color: #333
}

<div class="bird-gallery">
            <input type="text" class="bird-search" />
            <ul class="bird-list">
                
            </ul>
        </div>

Answer 1

将max-width:100%设置为img

var obj = [{
  imagePath: "https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg"
}, {
  imagePath: "http://www.flemings.com.au/wp-content/uploads/2015/07/Hero-Acer-Autumn-Blaze-Domain-Chandon-1500x700.jpg"
}]
var theList = document.getElementsByClassName("bird-list")[0]
for (var i = 0; i < obj.length; i++) {
  item = document.createElement("li");
  let img = document.createElement("img");
  img.src = obj[i].imagePath;
  item.appendChild(img);
  theList.appendChild(item);
}

.bird-gallery {
  display: block;
  float: left;
  width: 300px;
  height: 600px;
  margin: 1em;
  overflow: hidden
}

.bird-gallery .bird-list {
  width: 280px;
  height: 100%;
  list-style-type: none;
  margin: 25px 0;
  padding: 0;
  overflow-y: auto
}

.bird-gallery .bird-image {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  float: left;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: #FFF
}

.bird-gallery .bird-name {
  display: block;
  font-size: 24px;
  color: #333
}

img {
  max-width: 100%
}

<div class="bird-gallery">
  <input type="text" class="bird-search" />
  <ul class="bird-list">

  </ul>
</div>