I have a query regarding resizing an image within a div to either 100% width or 100% height of the containing div. Despite setting max-height and max-width to 100% as recommended here, I still encounter overflow issues without wanting to crop the image using overflow:hidden. The image is floated within the div.
Is there a way to achieve this? Here is my code. Could there be something wrong with it?
div#_content div#_thumbnails div {
padding:2px;
display:inline-block;
min-width:10%;
max-width:25%;
min-height:80px;
max-height:125px;
text-align:center;
}
div#_content div#_thumbnails img {
display:inline;
padding:2px;
float:left;
max-height:100%;
max-width:100%;
}
In the following JavaScript snippet, imgs represents a list of URLs and thumbnails is the main div for the containers to be placed in.
for (i in imgs) {
if (imgs[i]) {
var new_img = document.createElement('IMG'),
container = document.createElement('DIV')
new_img.setAttribute('alt', "image"+i.toString())
new_img.setAttribute('src', imgs[i])
container.appendChild(new_img)
thumbnails.appendChild(container)
}
}
I apologize if this question seems trivial, but despite my efforts in searching for solutions, none seem to work.