Flexslider - 如何設置最小高度？

Question

我正在使用Flexslider在我正在處理的網站上創建非常簡單的全寬幻燈片。

我的例子：http://hammr.co/3008537/4/index.html

不過，我正在尋找的是具有圖像始終跨越窗口的整個寬度，但是停止達到設定值後，調整高度，然後只是削減的側圖片。

這正是這裏發生的事情：http://www.orient-express.com/web/orex/collection/trains/venice_simplon_orient_express.jsp - 達到一定大小後，圖像不再調整大小，只是被切斷。

我挖掘了該網站上的腳本和CSS，但無法弄清楚。顯然，爲幻燈片設置最小高度會使它們變形。我怎樣才能達到這個效果？

Answer 1

我一直在尋找完全相同的東西！ 原來他們用在你的榜樣滑塊圖像的最小寬度：

.flexslider .slides img {min-width:1200px; } 

但在他們的示例中的形象得到從右邊斷了，我想要的形象在任何時候都居中，所以我發現這個職位：http://www.greywyvern.com/?post=323

比方說，我希望我的圖像至少有480px寬。如果我的屏幕寬度將會變小，那麼它會將我的圖像居中，並且它將平均切割左側和右側。

我還使用一個負責任的圖像加載腳本，以便更小的圖像將在小屏幕上加載：https://github.com/scottjehl/picturefill

這是我對這個設置標記：

<div class="flexslider"> 
<ul class="slides"> 
    <li class="slide full"> 
    <div class="centered"> 
     <?php 
     $myimg['desktop'] = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); 
     $myimg['tablet'] = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large'); 
     $myimg['phone'] = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium'); 
     $alt = get_post_meta(get_post_thumbnail_id($post->ID) , '_wp_attachment_image_alt', true); 
     if ($myimg['desktop'][0]): ?> 
      <span data-picture="data-picture" data-alt="<?php echo $alt; ?>"> 
       <span class="sml" data-src="<?php echo $myimg['phone'][0]; ?>"></span> 
       <span class="med" data-src="<?php echo $myimg['tablet'][0]; ?>" data-media="(min-width:480px)"></span> 
       <span class="lrg" data-src="<?php echo $myimg['desktop'][0]; ?>" data-media="(min-width:760px)"></span> 
       <!--[if (lt IE 9) & (!IEMobile)]> 
        <span data-src="<?php echo $myimg['desktop'][0]; ?>" alt="<?php echo $alt; ?>"></span> 
       <![endif]--> 
       <noscript> 
        <img src="<?php echo $myimg['desktop'][0]; ?>" alt="<?php echo $alt; ?>"> 
       </noscript> 
      </span> 
     <?php endif; ?> 
    </div> 
    </li> 
</ul> 
</div> 

這是我的CSS此設置：

@media only screen and (max-width : 480px) { 
    .flexslider .slides > li.full { 
     margin:0 auto !important; 
     width:100%; 
     height:auto; 
     overflow:hidden; 
    } 
    .flexslider .slides > li.full .centered { 
     position:relative; 
     right:50% !important; 
     text-align:center; 
    } 
    .flexslider .slides > li.full .centered img { 
     min-width:480px !important; 
     display:inline-block !important; 
     margin-right:-100% !important; 
    } 
}