图片无法正确放入div

Question

so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.

 .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

Remove img-responsive , because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.

Add overflow: auto; to the container:

.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有溢出：滚动或溢出：自动将解决您的问题。