0

I'm trying to achieve the same result as seen here on Mr. Green:

https://www.mrgreen.com/

with the image maintaining it's aspect ratio and dynamically scaling dependent on height/width. there are two separate divs/images, to avoid loading unnecessarily huge files. I've been trying to accomplish this in CSS alone, but not sure that there is a solution. On the above page there appears to be a function at work. Is there someone out there who knows how this could be accomplished?

I've tried a lot of different CSS combinations, such as:

 <div style="min-height: 100%; min-width: 31%;">
 <img style="height: auto; min-height: 100%; float: right; min-width: 31%; width: auto;" > src="/common/images/RightBackground.jpg">
 </div>

Just as an example of the sort of thing I've been attempting. Any ideas??? Attempting to find this through google was near impossible. This was my best bet:

Stretch and scale CSS background

any help would be much appreciated!

Community
  • 1
  • 1
user3520983
  • 23
  • 5
  • Try to use ad css `background-image` on your div and `background-size: cover;` – singe3 Jul 15 '14 at 14:27
  • See for example http://jsfiddle.net/6F4ST/ – singe3 Jul 15 '14 at 14:38
  • While both answers work in some regard, they are more in line with what I've already got: http://www.casinoruleton.com/. However, when you scale down, the height and the width come up against their limits. Ideally if I shrink the page so that left/right of the container is say 200x200, the side image will scale down to fit. Seems simple at first glance but I think it's more complex. Thanks guys. – user3520983 Jul 15 '14 at 14:55
  • above CSS is in near btm [id=carTheme] – user3520983 Jul 15 '14 at 15:01

0 Answers0