Question

I was religiously following this tutorial: http://www.icodeya.com/2012/08/grails-creating-image-gallery-feat.html on how to add an image gallery feature in grails. It works great and all, but I wanted to adjust the height of the main (big) image. I did it successfully, but when I upload an image which exceeds the default width, it ruins the whole layout. Like, a part of the image will overflow from the rest of the layout. I guess it’s more of a css problem.. and I suck at CSS. The code is below. A good demo can be seen here:
http://www.pikachoose.com/ Note that if I change the width to 100%, it’s the height that becomes inconsistent. 🙁

*upload an image if there’s none and see for yourself.

Anybody wanna help me? 😀

I offer free cookies. 🙂 🙂

@charset "UTF-8";
/* Just for the example. Fee free to delete these three lines */
body{font-family:Helvetica, sans-serif;}
a{color:white;}
.pikachoose {width: 800px; margin: 20px auto 20px auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px; height: 75px; margin-top: 10px; width: 100%;}
    .pika-thumbs li{ width: 144px; height:74px; margin: 5px; padding: 2px; overflow: hidden;
        float: left; list-style-type: none; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
    .pika-thumbs li:last {margin: 0;}
    .pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 800px;}
.pika-stage {overflow:hidden; position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:400px;}
.pika-stage img{height:100%;}

Answer 1

From looking at the demo, it looks like the stage for the main image is 800px so just add a max-width for your images that appear on the main stage:

.pika-stage img {
height: 100%;
max-width: 800px; /* Same width as the main stage so images don’t stretch past */
}