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