Autoscaling images in elastic layout_问答_开发者

开发者 https://www.devze.com 2022-12-09 17:58 出处：网络

How may I display two images on a website with elastic layout, side by si开发者_运维问答de 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

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>