Скрыть вертикальное переполнение на объекте динамического размера в CSS

Question

Представь, у меня есть две колонки. Левый столбец - текст. Правый столбец - это изображение, которое очень высокое. Это карта, но только картинка: не карта Google.

Я хочу

а) обрезать изображение до высоты текста (которая может изменяться динамически)

b) Вертикально отцентрируйте изображение (центр изображения находится в центре контейнера)

Другими словами, мне нужна карта, которая может изменять свою вертикальную высоту на основе динамически изменяемого материала в другом столбце.

Если это поможет, я использую Bootstrap 4 для макета.

Я предпочитаю CSS-решение, а не Javascript.

Я предпочитаю использовать тег изображения для фона, потому что моя карта генерируется с помощью пакетаact-static-google-map. Но я думаю, что это не ракетостроение, чтобы переключиться на созданный вручную URL и фоновое изображение, если это необходимо.

Answer 1

Если вы хорошо используете фоновое изображение, это легко. Вот пример того, как это можно сделать:

.container {
  display: flex;
}

.text, .image {
  width: 50%;
}

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci sapien, convallis vel suscipit nec, scelerisque ut purus. Phasellus pharetra aliquam auctor. Fusce pharetra nibh at accumsan convallis. Aenean et dignissim ligula. In tempus lorem odio, non ornare nulla posuere non. Duis nunc magna, egestas ac tempor lacinia, auctor vitae nisi. Nulla accumsan egestas nisi eget scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent porttitor pellentesque justo sit amet eleifend. Nam ut mauris eget arcu accumsan vestibulum. Aliquam lorem risus, sollicitudin in enim ac, tempus efficitur nunc. Vestibulum ullamcorper vel nisi eu ornare. Vivamus non enim urna. Donec vel arcu eget lectus dapibus lacinia non id metus. Etiam id mi urna. Pellentesque vulputate finibus posuere. Nunc pulvinar at leo nec condimentum. Quisque consequat velit auctor, pharetra libero vel, hendrerit ex. Phasellus luctus volutpat suscipit. In hac habitasse platea dictumst. Integer finibus turpis eget risus pellentesque, id hendrerit ligula condimentum. Morbi eget laoreet mi, et imperdiet diam. Suspendisse ac mi mattis, posuere velit nec, mollis dui. Praesent vitae iaculis ex. Integer in ligula arcu. Curabitur sed purus gravida, mattis sem vitae, tempor nibh. Duis sollicitudin lacus sapien, vitae varius massa aliquam quis.
    </p>
  </div>
  <div class="image" style="background-image: url('https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2014/1-earth.jpg')">
  </div>
</div>