Question

所以我想要完成的是拥有一个大图像，在这种情况下是一个地图，在一个较小的div中，带有滚动条，可以让你看看地图的其余部分。我现在正在使用class =“img-responsive”但它使图像与我不想要的div相同，因为当用户正在寻找道路时如果地图太小他们将无法看见。我还尝试为div设置最大高度，但图像溢出到背景上。请帮忙。

.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0px;
  max-height: 350px;
}

<div class="ibox-content" id="ibox-1">
  <div class="active content" id="elementMap">
    <img class="img-responsive" src="//lorempixel.com/600/600">
  </div>
</div>

Answer 1

删除img-responsive，因为它为元素提供了样式max-width: 100%，这意味着图片永远不会比其父图像宽。

将overflow: auto;添加到容器中：

.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
    max-height:350px;
    overflow: auto;
}

Answer 2

分配溢出：滚动或溢出：自动将解决您的问题。

图像无法正确适合div

2 个答案: