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

Question

我有高分辨率图像 (2592x1944)，但无法在 slider 中显示它们。

我正在使用固定容器(宽度 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+ 宽度的图像很难在智能手机上加载。