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

Posted 2023-03-05

【中文标题】同时使用css显示图像裁剪图像的顶部和底部

【英文标题】：while display image crop Top and Bottom of image using css

【发布时间】：2016-07-18 23:46:10

【问题描述】：

我正在尝试为显示内容大小的视频显示来自 youtube 的图像

height:180px
width :270px

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

例如：

我喜欢显示这样的图像

在网上找答案

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

How to automatically crop and center an image

这个最有帮助，但我不能使用背景图像标签。我想要它在标签中

CSS Display an Image Resized and Cropped

谁能帮我解决这个问题..谢谢

【问题讨论】：

使用Handbrake 编辑视频，它可以轻松裁剪。然后拍摄快照。

@zer00ne 实际上我并没有将图像存储到数据库中，每次使用 i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg 从 youtube 获取图像 -> 这个链接

【参考方案1】：

我不知道这是否是你要找的，但它看起来有点像你不想做的事情？

第一个 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"  class="">
</div>

<hr/>

<div class="box">
<img src="https://unsplash.it/270/220?image=871"  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"  class="te">
</div>

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

如果你的宽度总是固定的，你给图像的宽度，然后你找到正确的高度，然后你就有了你的“容器，如果它们总是具有相同的固定宽度，你可以在其中放置所有想要的图像

【讨论】：

@Pranavadurai 在这种情况下，您始终必须知道图像的高度和黑色空间

这个解决方案很好，但是如果我给我的宽度它剪切图像，我有固定的宽度，有什么解决方案吗？

【参考方案2】：

更新

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

保持纵横比

避免裁剪

没有黑条，只有图像边到边

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

【讨论】：

这段代码没有显示我想要的你可以在这里查看jsfiddle.net/pranavadurai/Lagy33pg

【参考方案3】：

您可以只剪辑图像。有关剪辑的更多信息，您可以访问此处：http://www.w3schools.com/cs-s-ref/pr_pos_clip.asp

例子：

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