Как адаптивно растянуть изображение по вертикали?

Question

Я пытаюсь реализовать сайдменю с фоновым изображением , но я не понимаю, как сделать его отзывчивым также по вертикали ... У меня есть это изображение https://ibb.co/Pzyyyh2, чье размер 320x1000px . Это очень высокое белое изображение, определенная точка которого становится черной. Я бы хотел, чтобы эта черная деталь всегда оставалась в определенном месте моего бокового меню (переход от белого к черному должен начинаться до части социальной ссылки).

Как вы можете см. здесь, на эмуляторе iPhone X он работает, как ожидалось: https://ibb.co/C7Nm6b7. На другом устройстве, например Moto G4 , происходит следующее: https://ibb.co/S7tQwJV

Answer 1

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

Если вы хотите использовать наклон, создайте первый div (родительский / обертка), а затем поместите его прямо перед нижним колонтитулом площадь. Затем внутри оболочки добавьте skew-div. Сделайте родительский элемент overflow: hidden, чтобы избыток skew-siv не становился видимым за пределами родительского элемента.

Вот так:

Тогда внутри вашего 'magi c -div' у вас будет следующее:

Родительский получает ширину: 100%; и переполнение: скрыто ;. Дочерний div skew внутри получает ширину: 100%; слишком. Если вы используете фон с svg, как было предложено ранее, правило размера фона должно быть на 100% автоматически или закрыто, в зависимости от сценария (ширина, которую вы покрываете + угол наклона). Попробуйте и расскажите, как все прошло.