1

我正在使用Flexslider在我正在处理的网站上创建一个非常简单的全角幻灯片。

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

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

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

我翻遍了那个网站上的脚本和 css，但无法弄清楚。显然，在幻灯片的任何位置设置最小高度会使它们变形。我怎样才能达到这个效果？

4

1 回答 1

5

我一直在寻找完全相同的东西！事实证明，他们在您的示例中使用了滑块图像的最小宽度：

.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;
    }
}
于 2013-08-31T09:50:58.570 回答