だから私はimgを含むdivを持っています.divは画面全体を埋めます。縦横比を維持しながらできるだけ多くの幅または高さを取るには、img (添付ファイルの E) が必要です。img の周囲に背景色を配置する必要がありますが、imgの背後には配置しないでください (透明度があり、背後にあるものを確認する必要があるため)。
これまでのところ、img の幅と高さをできるだけ大きくしましたが、img の周りだけに背景を配置する方法がわかりません。
私の推測では、A、B、C、D、F、G、H、I は背景色の 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>