我正在尝试为显示内容大小的视频显示来自 youtube 的图像
height:180px
width :270px
来自 youtube 的图片顶部和底部都有一些黑色斑点
例如：
我喜欢显示这样的图像
在网上找答案
发现这些链接很有帮助，但没有解决我想如何显示图像的方法
How to automatically crop and center an image
这个最有帮助，但我不能使用背景图像标签。我想要它在标签中
CSS Display an Image Resized and Cropped
谁能帮我解决这个问题..谢谢
【问题讨论】：
我不知道这是否是你要找的，但它看起来有点像你不想做的事情？
第一个 img 的高度为 220 像素，宽度为 270，然后我将 img 放在 z-index 1 的 div 后面，然后我给了 div 一个溢出隐藏和高度 180px 之后我必须给 img 一个margon top -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>如果你的宽度总是固定的，你给图像的宽度，然后你找到正确的高度，然后你就有了你的“容器，如果它们总是具有相同的固定宽度，你可以在其中放置所有想要的图像
【讨论】：
我已经更新了答案，但我不确定你想要什么，你只是说了你不想要的。所以我假设你想要：
保持纵横比
避免裁剪
没有黑条，只有图像边到边
我们知道这是一张宽高比为 16:9 的宽屏海报，所以如果您想要 270 像素的宽度，请执行以下操作：
宽度除以 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"> </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>【讨论】：
您可以只剪辑图像。有关剪辑的更多信息，您可以访问此处：http://www.w3schools.com/cssref/pr_pos_clip.asp
例子：
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
【讨论】：