javascript - How do I maintain the aspect ratio of side-by-side images, keep the images the same height AND have fixed padding between images? -

i’m using accepted table layout answer question: scale different width images fit row , maintain equal height place 2 images next each other, maintain aspect ratios, , keep them same height when scaling. there left padding of 8px on each image. padding stay 8px no matter how wide ul/table is.

here jsfiddle i’m working on: https://jsfiddle.net/maryjames0/u1o5lkmf/

here's html:

<ul> <li><img src="http://walops.com/wp-content/uploads/puppy-awesome-wallpaper-100x100.jpg" /></li> <li><img src="http://photos.the-scientist.com/legacyarticleimages/2011/08/panda-200x100.jpg" /></li> </ul> 

and css:

body {   margin: 0; } ul {   list-style: none;   padding: 0;   margin: 0;   display: table;   border-collapse: collapse;   width: 100%; } li {   display: table-cell; } img {   display: block;   width: 100%;   height: auto; } 

so far, i’ve tried following no success:

• adding padding-left of 8px images
• adding padding-left of 8px list items
• adding margin-left of 8px images
• adding margin-left of 8px list items
• adding 8px white left border images
• adding additional list items containing “placeholder” spans width set 8px

ideally, solve css, willing accept javascript/jquery solutions if that’s way it.

thanks ideas , help!

the trick keep 1 dimension fixed (in case height) while keeping other @ auto (in case width). browser you. list items, either float or display:inline-block sit side-by side. https://jsfiddle.net/u1o5lkmf/5/

you might need javascript find smallest image , adjust larger images instead of hard-coded fixed height.