同時顯示圖像露臍上衣和圖像的底部採用的CSS

Question

我想對視頻顯示來自YouTube圖片的顯示內容大小

height:180px 
width :270px 

從YouTube圖像與一些黑spece在頂部和底部的到來

例如：

我喜歡顯示這樣

圖像

搜索答案互聯網

發現這些鏈接是有幫助的，但對我怎麼想顯示的圖像沒有解決

How to automatically crop and center an image

這其中最有幫助的，但我可以不使用背景圖片標籤。我想在標籤

CSS Display an Image Resized and Cropped

任何人都幫我解決this..Thank你

Answer 1

更新

我已經更新了答案但我不能確定你想要什麼，你剛纔說你不想要的東西。所以我假設你想：

• 保持縱橫比

• 避免重茬

• 無黑邊，就在圖像的邊緣到邊緣

我們知道這是寬高比爲16：9的寬屏海報，所以如果您想要270px的寬度，請執行以下操作：

除以寬度由16

270/16 = 16.875 

採取這一商數，並通過9

16.875 * 9 = 151.875 

回合乘以其向上或向下

Round up to 152px 

變化，結果高度然後應用object-fit:cover

152px is the height of an image that's 270px wide and has an aspect ratio of 16:9. 

請查看Fiddle和更新摘錄

---

編輯

爲了反映OP的目標的更新和更好的理解，這個片段進行編輯。

object-fit是一個簡單的CSS屬性。看到這個article下面的代碼片段被註釋。順便說一句，你需要從這個代碼段中唯一的代碼是object-fit: cover，其餘的樣式和標記僅用於演示。

片段

/* We know this is a widescreen poster with the aspect ratio of 16:9, so if you want a width of 270px, do the following: 
 

 
    270/16 = 16.875 
 
    16.875 * 9 = 151.875 
 
    Round up to 152px 
 
    
 
152px is the height of an image that's 270px wide and has an aspect ratio of 16:9 */

.bg1 { 
 
    width: 270px; 
 
    height: 152px; 
 
    object-fit: cover; 
 
    outline: 2px dashed blue; 
 
} 
 
.bg2 { 
 
    width: 270px; 
 
    height: 152px; 
 
    object-fit: contain; 
 
    outline: 2px dashed blue; 
 
} 
 
.bg3 { 
 
    width: 270px; 
 
    height: 152px; 
 
    outline: 2px dashed blue; 
 
} 
 
aside { 
 
    height: 100%; 
 
    width: 40%; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
figure { 
 
    height: 180px; 
 
    width: 270px; 
 
    max-width: 50%; 
 
} 
 
.pointer { 
 
    position: absolute; 
 
} 
 
.pointer b { 
 
    font-size: 32px; 
 
} 
 
#a.pointer { 
 
    top: 43%; 
 
    left: 52%; 
 
} 
 
#b.pointer { 
 
    bottom: 5%; 
 
    left: 52%; 
 
} 
 
.box { 
 
    width: 600px; 
 
    height: 450px; 
 
    position: relative; 
 
} 
 
.spacer { 
 
    position: relative; 
 
    padding: .1% 0; 
 
    width: 2px; 
 
} 
 
code { 
 
    font-family: Consolas; 
 
    color: red; 
 
}

<section class="box"> 
 
    <figure> 
 
    <figcaption>object-fit: cover</figcaption> 
 
    <img class="bg1" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /> 
 
    </figure> 
 
    <!--<div class="pointer" id="a"><b>⬅</b> 
 
    <br/>Space</div>--> 
 
    <figure> 
 
    <figcaption>object-fit: contain</figcaption> 
 
    <img class="bg2" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /> 
 
    </figure> 
 

 

 
    <figure> 
 
    <figcaption>Without anything but the height property</figcaption> 
 
    <img class="bg3" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /> 
 
    </figure> 
 

 
    <aside> 
 
    <p><code>object-fit: cover</code> will stretch an image to the edges of it's container (parent element) while keeping aspect ratio and cropping.</p> 
 
    <p>But when given the correct dimensions, <code>object-fit: cover</code> will result in a perfect fit edge to edge. No cropping either.</p> 
 
    <div class="spacer">&nbsp;</div> 
 
    <p><code>object-fit: contain</code> will stretch an image to the edges of it's container while keeping aspect ratio but will not crop at the edges, so as you can see, this image has space left and right. At wider dimentions, the space will manifest below and above.</p> 
 
    
 
    <div class="spacer">&nbsp;</div> 
 
    <p>This is the image when set to it's aspect ratio at 270 x 152px and as you can see, without <code>object-fit:cover</code>, math alone will not resolve the problem.</p> 
 
    </aside> 
 
    <!--<div class="pointer" id="b"><b>⬅</b> 
 
    <br/>Space</div>--> 
 
</section>

Answer 2

我不知道如果這是你在找什麼，但它看起來像你想要的東西一點點不做？

1st img是高度220px和寬度270，然後我把img放在z-index 1的div後面，我給div一個隱藏的溢出和180px的高度，之後我只需要給img一個margon頂部-20px把它在中間

這就是剛剛在我的腦海希望這是有益的

.box{ 
 
    height:180px; 
 
    overflow:hidden; 
 
    z-index:2; 
 
    
 
} 
 
.test{ 
 
    z-index:1; 
 
    margin-top: -20px; 
 
}

<div> 
 
<img src="https://unsplash.it/270/220?image=871" alt="" class=""> 
 
</div> 
 

 
<hr/> 
 

 
<div class="box"> 
 
<img src="https://unsplash.it/270/220?image=871" alt="" class="test"> 
 
</div>

.box{ 
 
    height:148px; 
 
    overflow:hidden; 
 
    z-index:2; 
 
    
 
} 
 
.test{ 
 
    z-index:1; 
 
    margin-top: -57px; 
 
    width :350px 
 
} 
 
.box1{ 
 
    height:125px; 
 
    overflow:hidden; 
 
    z-index:2; 
 
    
 
} 
 
.test2{ 
 
    z-index:1; 
 
    margin-top: -50px; 
 
    width :300px 
 
}

<div> 
 
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="te"> 
 
</div> 
 

 
<div class="box"> 
 
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="test"> 
 
</div> 
 
<div class="box1"> 
 
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="test2"> 
 
</div>

如果你的寬度始終是固定的，你給寬度圖像，然後你找到分辯的高度，然後你有你「的容器，你可以把你想要的，如果他們總是有固定的同一圖像寬度

Answer 3

你可以只裁剪圖像。有關裁剪你可以去這裏的更多信息：http://www.w3schools.com/cssref/pr_pos_clip.asp

例子：

img { 
    position: absolute; 
    clip: rect(0px,60px,200px,0px); 
}