jquery - Flexslider - 如何设置最小高度？

Question

我正在使用Flexslider在我正在开发的网站上创建一个非常简单的全 Angular 幻灯片。

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

但是，我想要的是让图像始终跨越窗口的整个宽度，但在达到设定值后停止调整高度，然后只剪切图像的一侧。

这正是这里发生的情况:http://www.orient-express.com/web/orex/collection/trains/venice_simplon_orient_express.jsp – 达到一定尺寸后，图像不再调整大小，只是被切断。

我仔细研究了该网站上的脚本和 CSS，但无法弄清楚。显然，在任何地方设置幻灯片的最小高度都会使它们扭曲。怎样才能达到这样的效果呢？

Answer 1

我正在寻找完全相同的东西! 结果他们在您的示例中使用了 slider 图像的最小宽度:

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

但是在他们的示例中，图像从右侧被切断，我希望图像始终居中，所以我找到了这篇文章:http://www.greywyvern.com/?post=323

假设我希望图像宽度至少为 480 像素。如果我的屏幕宽度比这个小，它会将我的图像居中，并且均匀地切割左侧和右侧。

我还使用响应式图像加载器脚本，以便在较小的屏幕上加载较小的图像: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;
    }
}