图像响应

Question

我正在使用内容滑块在大多数移动设备上显示内容，而且我的大部分内容都是图片。

内容滑块的幻灯片放置在包装器（.swiper-wrapper）内，该包装器设置为占用屏幕尺寸的100％。

我遇到的问题是图像没有根据屏幕尺寸正确调整大小，并且当我进入横向模式时图像被切断。换句话说，我的图像没有响应。

我尝试了width:100%和height:auto，但仍然无效。

CSS

.swiper-container {

    display: block; !important;
    margin: 0 auto; !important;
    width: 100%; !important;

    background-color: #222;
    color: white;

}
.swiper-slide {

    max-width:100%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
    padding-right: 15px;
    padding-left: 15px;

}

.swiper-slide img{

    width:100% !important;
    height:100% !important;
    display:block;
}

HTML

<div class="swiper-container">
<!-- Build the content slides dynamically|databound -->
    <div id="slides" class="swiper-wrapper">
        <div class="swiper-slide">
            <img src='img/gallery-9.jpg' alt='YOLO'  />
        </div>
    </div>

    <div class="swiper-slide ">
        <div>Image 2</div>
            <img src='img/gallery-4.jpg' alt='YOLO'/>
    </div>
</div>

<script type="text/javascript" src="js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container',{
    speed : 400,
    freeMode : true,
    freeModeFluid : true,
    centeredSlides : true,
    resizeReInit : true,
    resistance : '100%',
    pagination: '.pagination',
    paginationClickable: true

    });

    $(window).resize(function(){
        var height = $(window).height();
        var width  = $(window).width();
        $('.swiper-container, .swiper-slide').height(height);
        $('.swiper-container, .swiper-slide').width(width);
        //Add reInit, because jQuery's resize event handler may occur earlier than Swiper's one
        mySwiper.reInit()
    })
    $(window).resize();


</script>

Answer 1

为元素设置以下属性将使图像响应

.swiper-slide img {     最大宽度：100％;高度：汽车; }

Answer 2

使用 Normalize.css 可以解决这个问题。

如果您不想使用所有Normalize.css：

，请使用此CSS

html {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
}

---

如果这不起作用，请在head中添加此内容以解决此问题：

<meta name="viewport" content="width=device-width,minimum-scale=0.8,initial-scale=1,maximum-scale=1.2" />

这也会主要禁用页面上的放大/缩小。

Answer 3

请勿尝试同时设置宽度和宽度。图像的高度。只需设置任何一个，另一个将根据图像的宽高比进行相应设置。

.swiper-slide img{
    width:100% !important;

    display:block;
}