I am struggling to adjust the size of an image within a container. In my setup, there are two columns - the left column is fixed at 280px and the right column expands to fill the remaining space. The image is placed in the right column, but its dimensions are unknown beforehand (in this case, it is 947px).
Everything looks fine when the window is large enough. However, as the window size decreases, the image's dimensions cause the right column to drop below the left column. Eventually, the image will scale down to fit the body once the window becomes small enough.
<!DOCTYPE html>
<head>
<style type='text/css'>
@media only screen and ( min-width: 641px ) { /* 641 or greater */
img { max-width: 100%; height: auto; display: block; }
.leftcol { width: 280px; float: left; outline: 5px dotted green; }
.rightcol { float: left; outline: 5px dotted red; }
}
</style>
</head>
<body>
<div class="leftcol">
Home
</div>
<div class="rightcol">
<img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
</div>
</body>
</html>