How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size.
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>