更新

Question

我正在尝试显示来自youtube的图片，以显示内容大小的视频

height:180px
width :270px

来自youtube图片的顶部和底部都带有一些黑色的

例如：

我想要显示这样的图像

在互联网上搜索答案

发现这些链接很有帮助，但没有我想要显示图像的解决方案

How to automatically crop and center an image

这个最有帮助，但我不能使用background-image标签。我希望它在标签

CSS Display an Image Resized and Cropped

任何人都可以帮我解决这个问题。谢谢你

Answer 1

更新

我已经更新了答案，但我不确定你想要什么，你只是说了你不想要的。所以我假设你想：

维持宽高比
避免裁剪
没有黑条，只是图像边缘到边缘

我们知道这是宽高比为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">&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

我不知道这是不是你要找的东西，但它看起来有点像你想做的那样吗？

第一个img是高度220px和宽度270然后我把img放在div的后面用z-index 1我给了div一个溢出隐藏和高度180px之后我刚刚给img一个margon top -20px把它放在中间

这就是我的想法，希望它是有帮助的

＆＃13;

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

＆＃13;

<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>

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

如果您的宽度始终是固定的，您可以给图像赋予宽度，然后找到高度，然后您可以使用＆＃34;容器，如果它们总是具有相同的固定宽度，您可以放置所需的所有图像

Answer 3

你可以剪辑图像。有关剪辑的更多信息，请访问：http://www.w3schools.com/cssref/pr_pos_clip.asp

示例：

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

同时使用css显示图像裁剪图像的顶部和底部

3 个答案:

更新

修改