rain13 Posted October 4, 2014 Share Posted October 4, 2014 Hi I want to fit image into parent div and keep it's ratio. max-width: 100%; and max-height: 100%;work only when parent height is in px but as soon as I use % it does not work anymore. How can I set parent's height in % and still have max-width: 100%; and max-height: 100%; working? When I set to % then the div just get's as long as it's needed to fit image and goes out of screen even. Is there way to set parent height to 70% and still fit the image the way it's currentöy fitted with out using java script? <!DOCTYPE html><html><head><style>.child{ max-width: 100%; max-height: 100%;}.parent{ width:100%; text-align: center; background-color: #00AA30; padding: 3px; height: 800px;}</style></head><body><div class="parent"><img class="child" src="http://img1.wikia.nocookie.net/__cb20100402141305/half-life/en/images/a/a5/Wheatley_floor_Test_Chamber_08.jpg"><!--<img class="child" src="http://www.real-tuning.com/wp-content/gallery/high-performance-diesel-trucks/Diesel-Trucks-cold-air-intake.jpg">--></div></body></html> Link to comment Share on other sites More sharing options...
niche Posted October 4, 2014 Share Posted October 4, 2014 (edited) well written question. In working this question, you may be stuck with pixels. I think css3 media queries is the direction you need to head in Edited October 4, 2014 by niche Link to comment Share on other sites More sharing options...
rain13 Posted October 4, 2014 Author Share Posted October 4, 2014 (edited) Tnx for info.I have written this resize function: function resize_img(){ //var max_h = Math.min(parseInt($(window).height()*.8),600); var max_h = parseInt(Math.min($(window).width(), $(window).height())*.8); var max_w = $("#content").width() - $(".navigation").width() -10; //alert("asd"); if($(".post_container > div:nth-child(1)").width() > max_w){ console.log("resize:GT"); //alert("s00"); $(".large_container").css("height",""); $(".large_container").css("width",max_w+"px"); }else{ console.log("resize:LT,EQ"); //alert("s"); $(".large_container").css("height",max_h+"px"); $(".large_container").css("width","100%"); }}I first wrote code for portrait images, and then discovered that it breaks landscape images by making them partially go out of right border. So I made if statement that should catch the case when image is too wide.But sometimes when I play around with windows sizes image gets resized falsely.Here's portrait example:http://autoit.net.ee/pub/?id=124And here's landscape example:http://autoit.net.ee/pub/?id=148Any ideas how I could write better function? Edited October 4, 2014 by SoItBegins Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now