Is there a way to make an image scale down instead of having text wrap around it when the browser window is resized to be more narrow? Currently, the text wraps under the image before the image scales due to its max-width property.
The desired outcome is to have a horizontal logo next to a horizontal menu, where the logo scales on window resize while the menu remains fixed in place.
If possible, CSS should be used for this task. However, Javascript can be considered if CSS alone cannot achieve the desired result.
<style>
img { max-width: 100%; }
#textblock { display: inline}
</style>
<div id="container">
<img src="https://www.google.com/images/srpr/logo11w.png">
<div id="textblock">Some Random Text</div>
</div>
Fiddle: http://jsfiddle.net/uLc8dcsh/1/