Question

我有高分辨率图像（2592x1944），我有问题在滑块中显示它们。

我使用的是固定容器（宽度100％，高度550px），里面是图像背景（也许我应该使用img标签？）。

<div class="header-right">
    <div class="banner">
         <div class="slider">
            <div class="callbacks_container">
                <ul class="rslides" id="slider">
                    <li>
                        <div class="banner">
                            <div class="caption">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS（背景网址在html中，所以我可以用php动态添加更多幻灯片）：

.slider {
    position: relative;
}
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}
.rslides li:first-child {
    position: relative;
    float: left;
    width: 100%;
    height: 550px;
}
.banner{
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}

目前它正在显示与左对齐的缩放（高度550px）的完整图像。

我希望以全宽度显示图像并剪裁边框（图像可以适合100％的屏幕并且具有良好的高度并且可以正确显示）。图像是相机照片（智能手机），它们的高度太高，不能采用16：9的格式，所以可能会裁剪它会有所帮助。我认为最好使用css而不是逐个修改图像。

我该怎么做？

http://jsfiddle.net/5n9mo3od/

Answer 1

您是否尝试使用封面而不是包含？裁剪实际上是一个很好的解决方案，因为不会加载整个图像。智能手机上很难加载2500+宽度的图像。

缩小图像，宽度100％和固定高度

1 个答案: