How do I adjust the height of the pikaChoose plugin without ruining the width?

Tags: css,grails,plugins

Problem :

I was religiously following this tutorial: 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: 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? :D

I offer free cookies. :) :)

@charset "UTF-8";
/* Just for the example. Fee free to delete these three lines */
body{font-family:Helvetica, sans-serif;}
.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%;}

Solution :

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 */ }

    CSS Howto..

    How to Hide Specific Part of Flash Object Using CSS?

    how to create Hollow triangle in css [duplicate]

    how to make observable a css class with knockout js

    How to change the CSS of the active toggle button using pseudo CSS transitions

    How do I apply the following CSS to only the Parent nodes of a Kendo Tree View?

    How to gracefully override the old css with a new css by jQuery?

    How to set div using Z-index and fix css

    Can't show Combobox in table

    How to make responsive text that isn't too large or too small

    How to create this responsive grid of different sized images with CSS & HTML, example below

    How is `outline: inherit 0` interpreted?

    How to set a (nice) linear-gradient from any color to transparent?

    how to add a margin on both sides and center the text in a paragraph?

    How to edit a pseudo element on focus using css or jQuery

    How to change button colors upon click (Javascript)?

    How to cancel an upstream CSS declaration?

    How to change image size on featured images in wordpress?

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    How to remove border-bottom of last div in a group - CSS

    How do I overwrite certain conditions when you have two CSS files?

    How do you make a floated element fill the remaining horizontal space when it is between its fixed width siblings?

    How to align images in a mosaic style? html/css

    How to place two section elements next to each other using CSS? [duplicate]

    CSS: how to select parent's sibling [duplicate]

    How to use CSS to make an input fields behaves like a button click?

    How to apply CSS to a Mac Chrome Select Box?

    How to make more divs appear when hovering over one div?

    How can I change the size of this box? (CSS)

    How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

    How to build those rectangular with picture and text css bootsrap? [closed]