所以我有一个 div，它包含一个 img，这个 div 填满了整个屏幕。我需要 img（附件上的 E）采用尽可能多的宽度或高度保持纵横比。我需要在我的 img 周围放置一个背景色，但不在img 后面（因为它具有透明度，我需要查看后面的内容）。
到目前为止，我让我的 img 尽可能多的宽度和高度，但无法弄清楚如何只在 img 周围而不是后面放置背景。
我的猜测是 A、B、C、D、F、G、H，我是具有背景色的 div，而 E 是 img 或包含 img 的 div。
我正在使用 Bootstrap 3.3.7，我希望尽可能保持自适应。
请帮忙！
编辑：完整代码看起来像这样 编辑 2：简化我的代码，将方法更改为网格方法并添加jsfiddle。不幸的是，图像附件中的 B 和 C 仍然存在空白，而 E 并没有占用它应该占用的所有空间。
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.grd-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
/*align-content: stretch;*/
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.grd-item-1,
.grd-item-2,
.grd-item-3,
.grd-item-4,
.grd-item-6,
.grd-item-7,
.grd-item-8,
.grd-item-9 {
background-color: #000000;
}
.grd-item-1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-5 {
/* main */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
}
.grd-item-6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-item-8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-item-9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-bg {
z-index: -1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
</style>
</head>
<body>
<div class="grd-container">
<div class="grd-bg">
<video playsinline autoplay muted loop poster="http://via.placeholder.com/1600x900" id="bgvid"
style="
position: absolute;
top: 50%;
left: 50%;
margin-top: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(http://via.placeholder.com/1600x900) no-repeat;
background-size: cover;
">
<source src="http://f.jblab.info/so_49420556/videobg.mp4" type="video/mp4">
</video>
</div>
<div class="grd-item-1">1</div>
<div class="grd-item-2">2</div>
<div class="grd-item-3">3</div>
<div class="grd-item-4">4</div>
<img class="grd-item-5" src="http://f.jblab.info/so_49420556/mask.svg">
<div class="grd-item-6">6</div>
<div class="grd-item-7">7</div>
<div class="grd-item-8">8</div>
<div class="grd-item-9">9</div>
</div>
</body>
</html>