javascript - 图片无法正确放入 div

Question

所以我想要完成的是在一个较小的带有滚动条的 div 中有一个大图像，在本例中是一张 map ，可以让您查看 map 的其余部分。我现在正在使用 class="img-responsive"但它使图像与我不想要的 div 大小相同，因为当用户正在寻找道路时如果 map 太小他们将无法看见。我还尝试为 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;
}