Итак, у меня есть div, содержащий img, div заполняет весь экран. Мне нужно, чтобы img (E на вложении) занимал столько же ширины или высоты, сохраняя соотношение сторон. Мне нужно поместить фоновый цвет вокруг моего изображения, но не позади изображения (поскольку оно имеет прозрачность, и мне нужно видеть, что позади).
До сих пор я получил свой img, занимающий как можно большую ширину и высоту, но не могу понять, как поместить фон только вокруг img, а не позади.
Я предполагаю, что A, B, C, D, F, G, H, I - это div с фоновым цветом, а E - это img или div, содержащий img.
Я использую Bootstrap 3.3.7 и хочу, чтобы он был как можно более адаптивным.
Пожалуйста помоги!
EDIT: Полный код выглядит следующим образом EDIT 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>
