css image auto resize height and width while maintaining aspect ratio

Giving users the power to update their site is a good thing. But sometimes asking a user to resize an image to certain pixel size is a daunting task. So we should always have a container that can resize these images for them. Below is the solution to resize an image based on its maximum height and maximum width while maintaining its aspect ratio. The solution is inspired from addedoptimization. First the image container in the html Html for the image container <div class="image-container"> <img src="place the image location here" class="resize"> </div> 123 <div class="image-container"><img src="place the image location here" class="resize"></div> Then the css resize code. css image resizing code img.resize{max-height:80px;width:auto;} img.resize{height:auto;max-width:80px;} 12 img.resize{max-height:80px;width:auto;}img.resize{height:auto;max-width:80px;}...
EasyRead Wheel of fortune

EasyRead Wheel of fortune

So my Co-founder Anna suddenly had an idea to give out promotion using a fun game of wheel of fortune. So we had decided to built one. First research Wheel of Fortune. There is 3 which i think is great. HTML5+ javascript http://www.dougtesting.net/winwheel http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas http://www.html5canvastutorials.com/labs/html5-canvas-wheel-of-fortune/ Jquery http://www.jquery4u.com/animation/jquery-wheel-fortune-demo/ Let’s get crackin I liked the Jquery one but the Jquery version had some bugs with IE .Decided to go with: http://www.dougtesting.net/winwheel Unzipped the whole folder into geteasyread Change info and remove the code to choose the strength Needed to force javascript refresh instead of keep clearing my cache but you could put your browser in developer mode as well. But i used these one liner instead. Forced javascript refresh <script>document.write('<script type="text/javascript" src="winwheel_1.2.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script> 1 <script>document.write('<script type="text/javascript" src="winwheel_1.2.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>   Ok great the wheel works, now we need user to enter their email and name before proceeding so that they don’t cheat. Used PureCss to built the page and form. Used Medoo as micro php framework for database. Important as it has security to Prevent SQL injection. Remember to turn on error report when developing. After modifying the pureCSS I needed some simple validation. Ok both items are working well individually. Now we need to merge them. First we need to be able to save inputs from form. Now that we are able to identify who the spinner is, we just need user to spin the wheel and we capture that and automatically save it. First we need to be able to save the value from the javascript spin. We do that by using javascript to save the value...