Html CSS响应裁剪图像_Html_Css

Html CSS响应裁剪图像

html css

Html CSS响应裁剪图像,html,css,Html,Css,YouTube为每个上传的视频创建一组缩略图。我以这个为例（长宽比应该是16:9）：我的目标我想把这些缩略图中的4个显示在两列中，同时去掉顶部和底部的黑线。如果可能的话，我宁愿只使用CSS（除非绝对必要，否则不要使用JavaScript/JQuery）。我可以在CSS中使用flexbox非常容易地做到这一点，但随着视口变小，黑色线条进入视图。因为图像高度是可变的，所以我甚至不确定是否可以做我想做的事情。以下是我尝试过的代码： <!DOCTYPE html> <html l

YouTube为每个上传的视频创建一组缩略图。我以这个为例（长宽比应该是16:9）：

我的目标

我想把这些缩略图中的4个显示在两列中，同时去掉顶部和底部的黑线。如果可能的话，我宁愿只使用CSS（除非绝对必要，否则不要使用JavaScript/JQuery）。我可以在CSS中使用flexbox非常容易地做到这一点，但随着视口变小，黑色线条进入视图。因为图像高度是可变的，所以我甚至不确定是否可以做我想做的事情。以下是我尝试过的代码：

<!DOCTYPE html>
<html lang="en">
<head>

<style type='text/css'>

#video_outer {
    max-width:978px;
    height:auto;
    padding:10px 10px 10px 10px;
    text-align: left; 
    margin-top: 0;
    background:#FFFFFF;
    margin: 0 auto; 
    display:flex;
    flex-wrap:wrap
}

#video_outer .video {
    width:100%; 
    height:270px;
    margin-bottom:10px;
    flex:0 calc(50% - 5px);
    box-sizing:border-box;
    background: white url('https://i.ytimg.com/vi/ENe89j89tBA/hqdefault.jpg') no-repeat;
    background-size:cover;
    background-position: center center;
}

#video_outer .right_margin_10 {margin-right:10px}

</style>

</head>

<body>

<div id="video_outer">
  
  <div class="video right_margin_10"></div>
  <div class="video"></div>

  <div class="video right_margin_10"></div>
  <div class="video"></div>

</div>

</body>

</html>


#视频外置{
最大宽度：978px；
高度：自动；
填充：10px 10px 10px 10px；
文本对齐：左对齐；
边际上限：0；
背景：#FFFFFF；
保证金：0自动；
显示器：flex；
柔性包装：包装
}
#视频{
宽度：100%；
高度：270px；
边缘底部：10px；
弹性：0计算（50%-5px）；
框大小：边框框；
背景：白色url（'https://i.ytimg.com/vi/ENe89j89tBA/hqdefault.jpg")不重复;；
背景尺寸：封面；
背景位置：中心；
}
#视频_outer.right _margin _10{margin right:10px}

要在视频预览中屏蔽或隐藏黑色背景，您需要创建一个与@mohamed mufeed注释的长宽比相同的容器

接下来，您可以在

.video

包装器中创建嵌套块元素。重要的是要记住，您的

.video

容器必须设置

overflow:hidden

，以便

div.video

可以“隐藏”图像上的黑色区域

在这个特定的例子中，所有这些的关键（其他人可以使用，希望其他人提供）是

.video

具有

溢出：隐藏和嵌套在中的div
。video
具有高度：0
以及填充顶部：52.25%
集。padding top
设置上传到YouTube的图像的纵横比
下面是对HTML/CSS稍加修改的版本：
#视频外置{
最大宽度：978px；
高度：自动；
填充：10px 10px 10px 10px；
文本对齐：左对齐；
背景：#FFFFFF；
保证金：0自动；
显示器：flex；
柔性包装：包装；
}
.视频{
宽度：50%；
边缘底部：10px；
flex:01自动；
框大小：边框框；
溢出：隐藏；
}
.video:n类型（奇数）{右填充：5px；}
.video:n类型（偶数）{左填充：5px；}
.video>div{
垫面：52.25%；
身高：0；
背景图像：url（'https://i.ytimg.com/vi/ENe89j89tBA/hqdefault.jpg');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
对HTML的轻微修改
你可以用这个小提琴看到它的动作：看看这个。
#video_outer {
    max-width: 978px;
    height: auto;
    padding: 10px 10px 10px 10px;
    text-align: left;
    background: #FFFFFF;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.video {
    width: 50%;
    margin-bottom: 10px;
    flex: 0 1 auto;
    box-sizing: border-box;
    overflow: hidden;
}
.video:nth-of-type(odd) { padding-right: 5px; }
.video:nth-of-type(even) { padding-left: 5px; }
.video > div {
    padding-top: 52.25%;
    height: 0;
    background-image: url('https://i.ytimg.com/vi/ENe89j89tBA/hqdefault.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
<div id="video_outer">
  <div class="video">
    <div></div>
  </div>
  <div class="video">
    <div></div>
  </div>
  <div class="video">
    <div></div>
  </div>
  <div class="video">
    <div></div>
  </div>
</div>