@ligisayan

Как сделать так, чтобы на всех разрешениях выводилась отцентрированная svg картинка с равными отступами?

В блоке бекграундом задано svg изображение. Как сделать так, чтобы выводилась отцентрированная картинка вне зависимости от размеров девайсов, причем отступы при этом сохранялись постоянными и изображение не выходило за границы? фидл
<div class="rectangle"></div>
<div class="work-scheme"></div>
<div class="rectangle"></div>

.work-scheme {
  background: url(http://a-lot-of-money.ru/wp-content/uploads/work-scheme.svg) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  min-height: 258px;
  height: 1px;
  display: block;
  margin: 0 auto;
}

.rectangle {
  background-color: red;
  height: 10px;
}

Пока есть возможность регулировать размер svg с помощью задания параметров min-height в media-queries, но это костыль.
Если использовать
background-size: cover;
то, это тоже не спасет ситуацию (достаточно подвигать разрешение и видно как картинка при больших обрезается и отступы от блоков начинают увеличиваться) - фидл
  • Вопрос задан
  • 212 просмотров
Решения вопроса 1
Exploding
@Exploding
wtf?
Ну а чем стандартный прием не устраивает?
left:50%;
top:50%;
transform: translate(-50%, -50%);

UPD: вот
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы