僅使用CSS從YouTube HQ默認圖像中刪除黑條？

我在我的頁面上顯示了YouTube的hqdefault縮略圖。然而，我注意到他們480 360，這意味着它們具有黑色頂和所有16底杆：9比例的視頻（其大部分）

實施例是：http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg

我的問題是：

我想要圖像自動縮放以適應其容器的寬度，這將是總窗口寬度的百分比（這意味着我不知道提前確切的像素值）。並隱藏黑條，當然不會扭曲圖像的比例。

這可以使用CSS完成（希望有良好的瀏覽器支持）？ - 我可以假設所有的圖像應該是16：9（對於那些具有其他比例的圖像，我可以切掉它的一部分，並且僅以16：9顯示它的一部分）。

感謝

（PS：我有一個JS的解決方案，但我想看看它是否可行CSS中的JS解決方案是使用JS來獲得容器的寬度，然後設置根據16容器的大小。：9比例，然後拉伸圖像並將其放置在中間，隱藏其中的額外區域 - 基本隱藏它的頂部和底部黑色條紋）

來源

2015-11-09 jjw2015

我發現這個solution。這裏是example：

您將div設置爲width:100%，它現在將延伸至容器大小，在此例中爲body。然後你設置padding-bottom: 56.25%;以獲得16：9的比例。

現在設置overflow: hidden;隱藏什麼是出來的股利和設置top: -16.75%;隱藏上部黑色條。

HTML

<div class="stretchy-wrapper"> 
    <div> 
     <img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/> 
    </div> 
</div>

CSS

body { 
    width: 70%; 
    margin: 8px auto; 
} 

div.stretchy-wrapper{ 
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9 */ 
    position: relative; 
    background: blue; 
    overflow: hidden; 
} 

div.stretchy-wrapper > div { 
    position: absolute; 
    top: -16.75%; bottom: 0; left: 0; right: 0; 
}

來源

2015-11-09 08:03:14

這很好用！謝謝！ – jjw2015

也許這樣 - 將圖像設置爲背景爲16 x 9 div，然後只需將圖像寬度設置爲100%和位置50% 50%

div { 
 
    background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg'); 
 
    background-size:100%; 
 
    background-position: 50% 50%; 
 
    height:180px; 
 
    width:320px; 
 
    }

<div></div>

來源

2015-11-09 07:44:24 sideroxylon

他問一個可以自動縮放以適應其容器寬度的解決方案。您使用的是固定大小 –

OP可以通過多種方式實現，取決於太多的未知數。 – sideroxylon

你是對的，你的解決方案不是其中之一。在您的解決方案中，縮放屏幕時圖像保持相同的大小。 –

我希望這次的jsfiddle會幫助你。乾杯!

working urljsfiddle

這將是合適的，即使你的web應用/網站響應。

來源

2015-11-09 08:18:43

僅使用CSS從YouTube HQ默認圖像中刪除黑條？

回答

相關問題