同时使用css显示图像裁剪图像的顶部和底部 [英] while display image crop Top and Bottom of image using css
问题描述
我正在尝试显示来自youtube的图像，用于显示内容大小的视频
I am trying to display images from a youtube for videos the display content size
height:180px
width :270px
从youtube图像的顶部和底部都带有一些黑色斑点
From youtube images are coming with some black spece on the top and bottom
例如：
我喜欢显示这样的图像
在互联网上搜索答案
发现这些链接很有帮助，但对于我要如何显示图像没有解决方案
found these links are helpful but no solution for how i want to display the image
此图片最有用，但是我不能使用背景图片标记。我想要在标签中
This one most helpful but i can't use background-image tag. i want it in tag
任何人都可以帮助我解决这个问题。谢谢
Anyone help me solve this..Thank you
推荐答案
更新
我已经更新了答案，但是我不确定您想要什么，您只是说了您没有不想。因此，我假设您要：
Update
I have updated the answer yet I'm not certain what you want, you just said what you didn't want. So I'm assuming you want to:
-
保持宽高比
Maintain aspect ratio
避免裁剪
没有黑条，只是图像边缘到边缘
No black bars, just the image edge to edge
我们知道这是宽高比为16：9的宽屏海报，因此，如果您想要270px的宽度，请执行以下操作：
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:
将宽度除以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.
请查看 提琴 并更新了片段
Please review the Fiddle and updated Snippet
为了反映更新并更好地理解OP的目标，请编辑此代码段。
To reflect the update and better understanding of OP's objective, this Snippet is edited.
object-fit 是一个简单的CSS属性。参见此 文章 。以下摘录为带注释的。顺便说一句，此代码段中您唯一需要的代码是 object-fit：cover ，其余样式和标记仅用于演示。
object-fit is a simple CSS property. See this article The Snippet below is annotated. Btw, the only code that you need from this Snippet is object-fit: cover, the rest of the styles and markup is just for presentation.
代码段
/* 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"> </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"> </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>
这篇关于同时使用css显示图像裁剪图像的顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
