Ensuring my website is responsive across all devices has been a priority for me. However, I have encountered an issue where, upon scaling down the size of the web browser, an image positioned within a div starts to overflow. While attempting to address this problem by adding overflow: hidden to the div, it did not effectively contain the image. To observe this issue in action, visit the jsfiddle link provided and resize the square frames to witness the image escaping the confines of the div.
https://jsfiddle.net/view02/hzv2jht0/
#deets img {
width: 100%;
height: 100%;
display: block;
}
#deets {
margin-top: -40px;
width: 100%;
height: 100%;
position: relative;
}
#text {
margin-left: 250px;
}
#text img {
margin-top: -55%;
position: absolute;
min-width: 100px;
max-width: 50%;
}<div id="deets">
<img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg">
<div id="text">
<img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
</div>
</div>