如何在不損壞寬度的情況下調整pikaChoose插件的高度？

我虔誠地遵循本教程：http://www.icodeya.com/2012/08/grails-creating-image-gallery-feat.html關於如何在grails中添加圖片庫功能。它的效果很好，但我想調整主（大）圖像的高度。我成功地做到了，但是當我上傳超過默認寬度的圖像時，它會毀掉整個佈局。就像，圖像的一部分將從佈局的其餘部分溢出。我想這是更多的CSS問題..我吮吸CSS。代碼如下。在這裏可以看到一個很好的演示： http://www.pikachoose.com/請注意，如果我將寬度更改爲100％，則高度會變得不一致。 :(如何在不損壞寬度的情況下調整pikaChoose插件的高度？

*上傳一張圖片，如果有沒有看到自己

任何人想幫助我。？d

我提供免費的餅乾:) :)

@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%;}

來源

2012-09-25 ShootingStar

從。看看演示，它看起來像主要圖像的舞臺是800px，所以只需爲主圖像上出現的圖像添加最大寬度即可：

.pika-stage img { 身高：100％; max-width：800px;/*相同的寬度爲主要舞臺，所以無論圖像伸不過去* /}

來源

2012-09-25 15:05:11 sbeliv01

我try..thanks。：d – ShootingStar

如何在不損壞寬度的情況下調整pikaChoose插件的高度？

回答

相關問題