Aligning pictures of different sizes and change its size according to the window size - WebDeveloper.com Forums

#native_company# #native_desc#

This site is best viewed in a modern browser with JavaScript enabled.

Aligning pictures of different sizes and change its size according to the window size

snvplayer

I am creating a photograph page for my wordpress blog.
My aim is to align two picture per row.

I can't figure out how to align a landscape orientation with a portrait orientation, or two portrait orientations as in the last two pictures on my page.

Another question is how can I make pictures auto-size so that the pictures will not shift when the browser windows shrinks?

http://jbkphotographs.com/?page_id=12

CSS for this page is

.photograph-page{
margin: 0 5%;
}

.photo {
float: left;

}

HTML code is

<div class="photograph-page">

<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/catching-the-sun1.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/catching-the-sun.jpg" alt="" title="catching-the-sun" width="500" height="332" /></a>
</div>

<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/last_trip.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/last_trip_icon.jpg" alt="" title="last_trip_icon" width="500" height="333" /></a>
</div>

<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/sunrise.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/sunrise_icon.jpg" alt="" title="sunrise_icon" width="500" height="332" /></a>
</div>

<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/on-the-bus.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/on-the-bus_icon.jpg" alt="" title="on-the-bus_icon" width="500" height="332" /></a>
</div>

<div class="photo"><a href="http://jbkphotographs.com/wp-content/uploads/2012/10/Deuce7_500px.jpg"><img title="Deuce7_500px" src="http://jbkphotographs.com/wp-content/uploads/2012/10/Deuce7_500px.jpg" alt="" width="500" height="325" /></a><a href="http://jbkphotographs.com/wp-content/uploads/2012/10/Evening-Sky_1_Icon.jpg">

<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/tree.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/tree_icon.jpg" alt="" title="tree_icon" width="332" height="500" /></a><div class="photograph-page">
</div>

<img class="alignnone size-full wp-image-168" title="Evening-Sky_1_Icon" src="http://jbkphotographs.com/wp-content/uploads/2012/10/Evening-Sky_1_Icon.jpg" alt="" width="332" height="500" /></a></div>
</div>

Thank you