2

Есть такой дизайн

введите сюда описание изображения

Обратите внимание на правое и левое изображение Вот тот же дизайн только для меньшего разрешения экрана

введите сюда описание изображения

Как видите при уменьшении экрана фоновые картинки не смещаются относительно контента - они обрезаются по краям

Вот как сделать что бы они по краям не обрезались?

PS

background: url(/img/leftTopBack.png) no-repeat;
background-position: left top;
background-attachment: fixed;

Такой код не работает

2
  • Вообще ничего непонятно
    – user212578
    2 фев 2018 в 5:13
  • background-position: center top; если верно поняла задачу. 2 фев 2018 в 6:07

1 ответ 1

3

Решение SVG

Легко решает проблемы с позиционированием и адаптивностью изображений при изменении размеров дисплея. Изображение не обрежется по краям, если вы его добавите внутрь svg файла.

<image xlink:href="leftTopBack.png" width="100%" height="100%"  />   

При уменьшении, увеличении размеров экрана, контейнера, в который лучше обернуть, добавленный инлайн svg, изображение будет находиться в одной системе координат с SVG и меняться пропорционально.

 <style>
    .container {
    width:100%;
    height:100%;
    background:grey;
    background-size:cover;
    background-position: 0% 100%;
    }

    </style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 500 272" preserveAspectRatio="xMinYMin meet" >
   
    	<image xlink:href="https://i.stack.imgur.com/zDLMO.png" width="100%" height="100%"  />

     </svg>	   
</div>	 

1
  • 1
    @Гошка Тарасов Если ответ вам был полезен, не забудьте пожалуйста поставить плюс и чекбокс. 2 фев 2018 в 11:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.