0

Имеется контейнер #container фиксированной высоты, вложенный контейнер #wrap и svg внутри последнего. В svg контейнере имеется rect с фоновым изображением шириной 600px. Контейнер #wrap занимает 100% ширины экрана и не более 600px. Каким образом можно изменить поведение svg контейнера так, чтобы вложенный rect всегда был по центру контейнера без использования js?

#container {
  height: 300px;
}
#wrap {
  /*border: 1px solid red;*/
  max-width: 600px;
  width: 400px;
  height: 100%;
  margin: auto;
}
<div id="container">
  <div id="wrap">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
      <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600px" height="300px">
          <image href="https://dummyimage.com/600x300/3029b3/fff" x="0" y="0" width="600px" height="300px"></image>
        </pattern>
      </defs>
      <rect x="0" y="0" width="600px" height="300px" fill="url(#img1)"></rect>
    </svg>
  </div>
</div>

Должно получиться так:

1 ответ 1

2
preserveAspectRatio="xMidYMid slice"
viewBox="0 0 600 300"

#container {
  height: 300px;
}

#wrap {
  border: 1px solid red;
  max-width: 600px;
  width: 100%;
  height: 100%;
  margin: auto;
  animation: w-300-600 5s linear alternate infinite;
}

svg {
  width: 100%;
  height: 100%;
}

@keyframes w-300-600 {
  from { width: 300px; }
  to   { width: 600px; }
}
<div id="container">
  <div id="wrap">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 600 300">
      <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600px" height="300px">
          <image href="https://dummyimage.com/600x300/3029b3/fff" x="0" y="0" width="600px" height="300px"></image>
        </pattern>
      </defs>
      <rect x="0" y="0" width="600" height="300" fill="url(#img1)"></rect>
    </svg>
  </div>
</div>

5
  • Да slice как раз нужен, высота, как я писал, фиксированная svg занимает 100% высоты или абсолютно заданное значение по высоте, а изображение должно обрезаться с боков и быть отцентрировано посередине
    – Alaksander
    17 сен 2020 в 5:56
  • @Alaksander, тогда я вопорс не понимаю. Добавь картинки того, что должно получиться и при каких размерах.
    – Qwertiy
    17 сен 2020 в 8:17
  • @Alaksander, готово. Немного дрожит из-за анимации, просто на сайте нормально будет.
    – Qwertiy
    17 сен 2020 в 9:31
  • Да, спасибо, работает так, как и предполагалось, анимация и не нужна
    – Alaksander
    17 сен 2020 в 9:51

Ваш ответ

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

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