Как применить градиент к (фиксированной ширине) изображению, которое является отзывчивым?

Question

Я не уверен, как объяснить мой вопрос. Итак, вот скрипка: https://jsfiddle.net/8zsqydj0/

.background-img-wrapper:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background-img-wrapper {
  max-width: 1920px;
}

.background:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background {
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row justify-content-center position-fixed background">
  <div class="background-img-wrapper">
    <img class="img-fluid" src="https://via.placeholder.com/1920x1080/000000/" />
  </div>
</div>

Я пытаюсь применить градиент к трем сторонам изображения. Это далеко я получил. Однако изображение центрируется на странице и имеет фиксированную (максимальную) ширину 1920 пикселей. Градиент применяется к родительскому элементу div, который составляет 100% страницы, и изображение является плавным. Таким образом, когда градиент просматривается с разрешением 1920px или ниже, все выглядит хорошо. Однако, когда вы изменяете размер страницы выше шириной 1920px, градиент перемещается с боковой стороны окна, а не остается фиксированным по бокам изображения. Если это имеет смысл.

Итак, как применить градиент к изображению вместо родительского div или как ограничить стороны градиента размером изображения? Я использую Bootstrap 4.

Кроме того, мне не обязательно сохранять текущую структуру. Если есть лучший способ добиться всего этого, пожалуйста, дайте мне знать:)

Answer 1

^{Я заменим 1920px на меньшее значение, чтобы мы могли лучше увидеть результат}

Легким решением было бы добавить position:relative и настроить z-index, как показано ниже:

.background-img-wrapper:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background-img-wrapper {
    max-width: 400px;
    position:relative; /* added */
}

.background:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    z-index:1; /* added */
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background {
    width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="row justify-content-center position-fixed background">
  <div class="background-img-wrapper">
    <img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
  </div>
</div>

Или упростите свой код, как показано ниже:

.background:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background: 
     linear-gradient(to bottom, transparent 80%, #fff 100%),
     linear-gradient(to right, #fff 0%, transparent 20%  80%, #fff 100%);
}

.background {
    max-width: 400px;
    left:0;
    right:0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto">
    <img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
</div>

Если соотношение изображений всегда будет одинаковым, вы все равно можете упростить:

.background:before {
    content: "";
    padding-top:calc(300/400 * 100%); /* Height/width */
}

.background {
    max-width: 400px;
    left:0;
    right:0;
    background: 
     linear-gradient(to bottom, transparent 80%, #fff 100%),
     linear-gradient(to right, #fff 0%, transparent 20%  80%, #fff 100%),
     url(https://via.placeholder.com/400x300/000000/) center/cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto d-flex">
</div>