I have an image element, I need it to fit inside a specific div (let's call it div 1). The image has a wrapper div that needs to fit to the image (let's call it div 2).
It almost works using the following methods: setting the image and div 2 to float: left; or setting image to display: block, and div 2 to display: inline-block.
Both work great when the page is first loaded, but div 1 is actually a fluid width/height div that resizes with the browser, and when you reduce the height of the browser the width of div 2 doesn't adjust (illustrated by the green border)
Here are sample pages: (left:-50%, left:50% are for centering, don't make a difference with the bug)
1 Answer
Try background-size: cover; and top: 0;, bottom: 0; or try position: fixed;
