Адаптивное изменение размера изображения и выборочная обрезка его ширины с помощью набора правил

Question

Я хочу, чтобы фоновое изображение появлялось в верхней части и полностью покрывало ширину страницы.Как вы можете видеть, изображение довольно широкое и короткое - https://i.imgur.com/aJb6eBr.jpg. Это должно быть изображение заголовка страницы с содержимым страницы, появляющимся под ним.

Если ширина браузерабольше, чем оригинальная ширина изображения, ширина и высота изображения должны быть пропорционально увеличены (вместе с его контейнером - таким образом, перемещая вниз содержимое страницы, которое появляется под изображением).

Если ширина браузера меньше ширины изображенияПри исходной ширине изображение должно сохранять свой исходный размер без сжатия и обрезаться с обеих сторон до тех пор, пока не будет достигнута 15% -ная обрезка с каждой стороны (Вы можете видеть, что изображение имеет достаточно широкие зеленые области с обеих сторонкоторые безопасны для обрезки).

Хитрость в том, что как только 15% обрезки было достигнуто с каждой стороны, я хочу, чтобы изображение начало уменьшаться пропорционально ширине браузера, таким образом, средние 70%изображение всегда будет видно, и изображение никогда не будет обрезано более чем на 15%м с каждой стороны.

Высота изображения (и его контейнера) должна автоматически масштабироваться пропорционально ширине изображения.Если высота изображения (вместе с контейнером) уменьшается до размера оригинала, содержимое страницы увеличивается, поэтому расстояние между содержимым страницы и изображением всегда остается неизменным.

Яищу чистое решение (желательно только с CSS), похожее на это: https://demodern.de/projekte/mediengruppe-rtl

Есть идеи, ребята?

Answer 1

С точки зрения использования CSS довольно просто заставить все работать так, как вам нужно.Для этого вы можете использовать изображение как оно есть и то же изображение на фоне родительского элемента.Но вам придется настроить CSS для работы только с этим изображением.В случае, если вы попытаетесь использовать другое изображение - вам придется настроить отступы или медиазапросы.Решение, которое работает как ОДИН раз для конкретного изображения, но, тем не менее, не использует JS вообще, и это здорово.А что касается ссылки на изображение дважды - это не проблема для браузера.Он сделает только один запрос http для одного уникального медиаресурса, поэтому проблем с производительностью с этой точки зрения нет.Вот как вы можете сделать то, что вы хотите:

.wrapper {
  background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  padding-top: 38%;
}
.wrapper img {
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  min-width: 100%;
  display:none;
}
@media screen and (min-width: 1338px) {
  .wrapper {
    padding-top: 0;
  }
  .wrapper img {
    display: inline-block;
    vertical-align: top;
  }
}
<div class="wrapper">
  <img src="/images/_m1NuVvd.jpeg" />
</div>

Убедитесь, что вы используете правильный путь к своему изображению вместо /images/_m1NuVvd.jpeg.Кстати, в будущем будет лучше проверять ссылки на изображения таким образом, чтобы они могли быть повторно использованы в jsfiddle.Dropbox не позволяет использовать изображение по этой ссылке.С наилучшими пожеланиями