Clip image BOTH left and right

Question

Ref: Custom thumbnail or splash screen for embedded youtube video

ALSO, Ref: http://lovesongforever.com ; please notice here what happens to the Youtube generated thumbnail size when the window is resized:

(a) the height does NOT change (b) the width clips BOTH left and right

This is what I want to happen and it does that with Youtube's thumbnail using width: 100% and the fixed height: 420px

However, when I use just a simple image (not the youtube embedded video), (a) happens ... and (b) the width clips just on the right.

How do I do the ORIGINAL a + b using CSS on my image?

The existing code looks like this:

CSS:

.ls_video {
    margin-left:  auto;
    margin-right: auto;
    /*
        width = 640px crops off just the right edge with window resizing.
        width = 100%  crops off both edges simultaneously with window resizing.

        for the Youtube video, but NOT my image!
    */
    width:        100%;
    height:       420px;
    text-align:   left;
}

JS:

    var videoSrc   = "http://www.youtube.com/embed/MxuIrIZbbu0";
    var videoParms = "?autoplay=1&amp;fs=1&amp;hd=1&amp;wmode=transparent";

    var youtubeVideo = "" +
        "<iframe class='ls_video' src='" + videoSrc + videoParms + "'>" +
        "</iframe>";            

    var theThumbNail = "" +
        "<div onclick=\"this.innerHTML = youtubeVideo;\">" +
        "<img class='ls_video' src='images/MLSFthumbnail.jpg' style='cursor:pointer' alt='splash' \/> " +
        "</div>";
    document.write (theThumbNail);

Do you have any kind of code that we can diagnose your issue with? — Terry, Dec 26 '13 at 18:42
Thanks for asking ... should have added sample code from the get-go — , Dec 26 '13 at 18:51

score 0 · Accepted Answer · answered Dec 26 '13 at 19:05

Because layouts are typically constructed from left to right, it is common for the right side of the image to be cropped off when it's dimensions exceeds the width of it's containing parent.

Unfortunately, it is difficult to adjust the size of the <img /> element if you want to keep the aspect ratio and fill out all the available space. The former can be easily done with width: 100%; max-width: 100%;, but the latter is more of a challenge.

That brings us to the utility of background size. CSS now supports values of background-size such as cover, which dictates that the background image will fill out the container yet retain aspect ratio, cropping off parts that we don't need.

CSS:

.ls_video {
    background-size: cover;
    background-position: center center;
    margin-left:  auto;
    margin-right: auto;
    width:        100%;
    height:       420px;
    text-align:   left;
}

JS:

var videoSrc   = "http://www.youtube.com/embed/MxuIrIZbbu0";
var videoParms = "?autoplay=1&amp;fs=1&amp;hd=1&amp;wmode=transparent";

var youtubeVideo = "" +
    "<iframe class='ls_video' src='" + videoSrc + videoParms + "'>" +
    "</iframe>";            

var theThumbNail = "" +
    "<div onclick=\"this.innerHTML = youtubeVideo;\" style=\"background-image: url(images/MLSFthumbnail.jpg);\"></div>";
document.write (theThumbNail);

Clip image BOTH left and right

1 Answers1