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

Question

I have high resolution images (2592x1944) and I'm having problem to show them in a slider.

I'm using a fixed container (width 100% and height 550px) and inside it the image as background (maybe I should use img tag?).

<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>

And the CSS (the background url is in the html so i can dynamically add more slides with 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;
}

Currently it's displaying the full image scaled (height 550px) aligned to left.

I'd like to show the image with a full width and the borders cropped (in a way that the image can fit in the 100% of the screen and have a good amount of the height and can be properly displyed). The images are camera photos (smartphone) and they have too much height to be in a 16:9 format so maybe cropping it it'll help. I think it's better to use css rather than modify the images one by one.

How can I do this?

http://jsfiddle.net/5n9mo3od/

Answer 1

Did you tried to use cover instead of contain for this? Cropping is in fact a good solution because not the whole image would be loaded. An image of 2500+ width can be hard to load on a smartphone.