响应式设计:在768px以下，我的横幅图像非常拉长。我尝试过height=auto，但IE9当时根本不显示它们

Question

响应式设计:在768px以下，我的横幅图像非常拉长。我尝试过height=auto，但IE9当时根本不显示它们。

那么，我如何才能使高度不伸展且看起来像样呢？

我使用的是: Bootstrap 3.1.1、jQuery 1.11和FlexSlider (有问题的图像位于FlexSlider轮播中)

我的网页是：http://www.amleo.com/

我的HTML是：

<section class="slider">
    <div class="container White_BG">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
            <!--Slider Start-->
            <div class="flexslider" id="mainslider">
                <div class="flex-viewport" style="overflow: hidden; position: relative;">
                    <ul class="slides" style="width: 1200%; margin-left: -1514px;">
                        <li class="clone" style="width: 757px; float: left; display: block;">
                            <a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
                            <img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
                            </a>
                        </li>
                        <li class="" style="width: 757px; float: left; display: block;">
                            <a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
                            <img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
                            </a>
                        </li>
                        <li style="width: 757px; float: left; display: block;" class="flex-active-slide">
                            <a href="http://www.amleo.com/polysample/a/29_31/" target="_blank" title="OW Poly Sample">
                            <img src="http://cdnll.amleo.com/images/art/1433_ow-plus-web.jpg" width="770" height="322" title="OW Poly Sample" alt="OW Poly Sample">
                            </a>
                        </li>
                        <li style="width: 757px; float: left; display: block;">
                            <a href="http://www.amleo.com/quickorder.aspx" title="Quick Order Form">
                            <img src="http://cdnll.amleo.com/images/art/1441-quick-order-content-web.jpg" width="770" height="322" title="Quick Order Form" alt="Quick Order Form">
                            </a>
                        </li>
                        <li style="width: 757px; float: left; display: block;">
                            <a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
                            <img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
                            </a>
                        </li>
                        <li class="clone" style="width: 757px; float: left; display: block;">
                            <a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
                            <img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
                            </a>
                        </li>
                    </ul>
                </div>
                <ol class="flex-control-nav flex-control-paging">
                    <li><a class="">1</a></li>
                    <li><a class="flex-active">2</a></li>
                    <li><a>3</a></li>
                    <li><a>4</a></li>
                </ol>
                <ul class="flex-direction-nav">
                    <li><a class="flex-prev" href="#">Previous</a></li>
                    <li><a class="flex-next" href="#">Next</a></li>
                </ul>
            </div>
            <!--Slider End-->
        </div>
        <!--Side Banner-->
        <div class="col-md-3 hidden-md hidden-sm hidden-xs visible-lg" style="border:4px;padding-left:0px!important;">
            <a href="http://www.amleo.com/careers/a/66/" title="AM Leonard Careers">
            <img src="http://cdnll.amleo.com/images/art/Career_ad_2014.jpg" width="379" height="321" alt="AM Leonard Careers">
            </a>
        </div>
        <!--End Side Banner-->
    </div>
</section>

Answer 1

在flexslider.css中，它显示为：

.flexslider .slides img { ... }

看起来您需要添加height: auto;，然后使用javascript删除滑块应用于图像的height属性。

大致是这样的：

jQuery('.slides img').attr('height', '');

Answer 2

使用

.flexslider .slides img{ width:auto;}

如果您不想拉伸图像。