Question

想象一下，我有两列。左列是文本。右列是非常高的图像。这是一张地图，但只是一张图片：不是Google地图。

我想

a）将图片裁剪到文本的高度（可以动态更改）

b）使图像垂直居中（图像中心在容器的中心）

换句话说，我想要一个可以根据另一列中动态变化的东西改变其垂直高度的地图。

如果有帮助，我正在使用Bootstrap 4进行布局。

我非常喜欢CSS解决方案而不是Javascript解决方案。

我更喜欢在背景上使用图片标签，因为我的地图是使用react-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>

隐藏CSS中动态调整大小的对象的垂直溢出

1 个答案: