左右剪辑图像

Question

参考：Custom thumbnail or splash screen for embedded youtube video

另外，参考：http://lovesongforever.com；请注意在调整窗口大小时 Youtube 生成的缩略图大小会发生什么变化：

(a) 高度不变 (b) 左右两边的宽度夹子

这就是我想要发生的事情，它使用 Youtube 的缩略图使用宽度：100% 和固定高度：420px 来实现这一点

但是，当我只使用一个简单的图像（不是 youtube 嵌入视频）时，(a) 会发生......并且 (b) 右侧的宽度剪辑。

如何在我的图像上使用 CSS 执行 ORIGINAL a + b？

现有代码如下所示：

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&fs=1&hd=1&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);

Answer 1

因为布局通常是从左到右构建的，所以当图像的尺寸超过其包含父级的宽度时，通常会裁剪图像的右侧。

不幸的是，如果要保持纵横比并填充所有可用空间，则很难调整<img /> 元素的大小。前者可以通过width: 100%; max-width: 100%; 轻松完成，但后者更具挑战性。

这给我们带来了背景大小的实用性。 CSS 现在支持 background-size 的值，例如 cover，这表示背景图像将填充容器但保持纵横比，裁剪掉我们不需要的部分。

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&fs=1&hd=1&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);