How do I force image inside <div> tag when browser window narrows?

HTML & CSS
1

Hello;

Can someone tell me how to keep/force the image below inside the outside <div> tag?

The image below fits inside the 50% width outside <div> tag when the browser is wide enough.

However, when I make the browser window narrow the outside <div> tag gets narrow - but the image stays the same width. It juts outside of the right border of the outside <div> tag.

The image is 350px wide. I have tried using width: 400px and min-width: 400px for the inside <div> tag. Setting the width for the inside <div> tag at 400px works in the FireFox browser. But that methodology won’t work with the Internet Explorer browser.



// outside div tag.
<div style="width: 50%; border: 2px solid">
	
	// this image juts outside when browser is made narrow
	<div><img src="sample.png" /></div>
	
	</div>

What I need is for the outside div tag to get narrow to the width of the image then become fixed at that point so that it still surrounds the entire image.

Thanks.

2

Have you tried min-width: 400px on the outer div? That’s what I would do.

Or you could set to image to max-width: 100%.

3

ralph.m;

Thanks for responding to my question. The min-width: 400px works!

(Note: I made a mistake in my earlier post. :blush: The first code - surprisingly - worked good with the IE browser but did not work with the FireFox browser.)

Thanks again.