폭을 망치지 않고 pikaChoose 플러그인의 높이를 조정하려면 어떻게해야합니까?

Question

나는이 튜토리얼을 종교적으로 따르고있다. : 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%;} 

Answer 1

에서. 데모를 보면 메인 이미지의 스테이지가 800px 인 것처럼 보이므로 메인 스테이지에 표시되는 이미지의 최대 너비를 추가하십시오.

.pika-stage img { 신장 : 100 %; 최대 너비 : 800px;/* 메인 스테이지와 같은 너비가 이미지가 지나치게 늘어나지 않도록 */ }