Как правильно расположить элемент SVG, чтобы он даже изменялся в размерах

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

Изображение того, что я хочу

Это мой CSS, но после изменения размера они не остаются даже внизу. У меня есть фон, разделенный на два разных цвета

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.column1 {
  height: 100vh;
  background-color: #679289;
}
.column2 {
  height: 100vh;
  background-color: #f4c095;
}

.svg1 {
  overflow: visible;
  transform: translate(0px, 68px);
}

.svg1 {
  
  overflow: visible;
  transform: translate(0px, 166px);
}

Также обратите внимание, что SVG имеют разный размер.

Привет и добро пожаловать в SO. Сначала возьмите тур. Затем прочитайте как здесь задавать вопросы. После этого отредактируйте вопрос в соответствии с рекомендациями и укажите минимальный воспроизводимый пример для деталей отладки.

tacoshy 13.05.2022 21:28
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте содержать элементы в div и использовать flex-box. Возможно, вам придется настроить его для других элементов макета, но принцип должен быть таким же.

https://codepen.io/jonshipman/pen/zYRoKjX

<div class = "flex">
  <div>
    <img src = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />
  </div>

  <div>
    <img src = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />
  </div>
</div>
.flex {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}

.flex > div {
  flex: 1 0 auto;
}

img {
  width: 5rem;
  height: 5rem;
  display: block;
  margin: 0 auto;
}

div {
  background: blue;
}

div:nth-child(2) {
  background: yellow;
}

@media screen and (max-width:786px) {
  .flex {
    flex-direction:column;
    align-items:center;
  }
  
  .flex > div {
    display:flex;
    align-items:flex-end;
  }
}

Другие вопросы по теме