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&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);

Answer 1

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

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

这带给我们背景大小的效用。 CSS现在支持背景大小的值，例如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&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);

剪辑图像左右两边

1 个答案: