Home/ Questions/Q 426959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T19:31:53+00:00

How may I display two images on a website with elastic layout, side by

  • 0

How may I display two images on a website with elastic layout, side by side which will autoscale to 50% of parent containter?

I was playing with it last night but didnt went too far.

When I went with divs, they overlaped each other or second image was displayed underneath first.

When I went with table, table become wider than screen resulting in vertical scroll bar.

I dont know in advance what size image is, nor what resolution user is having, idealy I would set this up purely by css, without using javascript.

I had luck on other page with single image autoscaling to fit in container by setting max-width:90% but I can’t apply this trick here. Funny thing is, it this scenario max-width is set according to window (parent element), while in examples above max-width is set according to width of image itself.

Sorry for my english, if something is not clear, please ask.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see what you’re saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn’t take a fraction in the percent sign. See if this will do the trick:

    <html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' />
 <img src='b.jpg' />
</div>

</body>
</html>

    Edit: Or even better, if all you have are the images in the box, don’t let it wrap at all:

    <html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
 white-space: nowrap;
 overflow: visible;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' /><img src='b.jpg' />
 <!-- Don't put a space between the images. -->
</div>

</body>
</html>
    • 0