如何在不破坏宽度的情况下调整 pikaChoose 插件的高度？答案

【问题标题】：How do I adjust the height of the pikaChoose plugin without ruining the width?如何在不破坏宽度的情况下调整 pikaChoose 插件的高度？
【发布时间】：2012-09-25 14:29:53
【问题描述】：

我一直在认真学习本教程：http://www.icodeya.com/2012/08/grails-creating-image-gallery-feat.html，了解如何在 grails 中添加图片库功能。它工作得很好，但我想调整主（大）图像的高度。我成功了，但是当我上传超过默认宽度的图像时，它会破坏整个布局。就像，图像的一部分将从布局的其余部分溢出。我想这更像是一个 css 问题.. 我很讨厌 CSS。代码如下。可以在这里看到一个很好的演示： http://www.pikachoose.com/ 请注意，如果我将宽度更改为 100%，则高度不一致。 :(

*如果没有图片，请上传图片并自己查看。

有人想帮我吗？ :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%;}

【问题讨论】：

标签： css grails plugins

【解决方案1】：

从演示来看，主图像的舞台似乎是 800 像素，因此只需为出现在主舞台上的图像添加最大宽度：

.pika-stage img { 高度：100%；最大宽度：800px； /* 与主舞台的宽度相同，因此图像不会拉伸过去 */ }

【讨论】：