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

Flexslider - 如何设置最小高度？

1 个答案: