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

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（背景 url 在 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;
}

目前它显示的是向左对齐的完整图像（高度 550 像素）。

我想以全宽显示图像并裁剪边框（以使图像可以 100% 适应屏幕并具有适当的高度并且可以正确显示的方式）。这些图像是相机照片（智能手机），它们的高度太高，无法采用 16:9 格式，因此裁剪它可能会有所帮助。我觉得还是用css比一张一张修改图片好。

我该怎么做？

http://jsfiddle.net/5n9mo3od/

Answer 1

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