sw7x Posted April 16, 2014 Share Posted April 16, 2014 (edited) there is a div id =certificate and inside that div there is a image ,image height < div heightpicture below shown theseactual sizes of div,imagefor responsive design when browser resize image size need to vary.when browser width reducing image need to be small without changing its aspect ratio . i mean it has to be like picture belowfor that i used for image width 100% now image is responsive but it has a another effect on image width it is image take all the width of certificate div.it leads to change aspect ratio of the image.its shown belowfor responsive design i need a way to keep aspect rato of the image and also image will not exceed the parent div sizehere is my code both html and css html code <!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/> <title>abc</title> </head> <body> <div class="wrapper"> <div id="certificate"><img src="images/roundlogo.jpg" alt="" /></div> </div> </body> </html> css code @charset "utf-8"; /* CSS Document */ #certificate { width:950px; border:2px solid; } #certificate img { padding-left:50px; } .wrapper { width:950px; margin:0 auto; } @media screen and (min-width:181px) and (max-width:950px) { .wrapper { width:100%; } #certificate { width:100% } #certificate img { padding-left:5.263%; } }here is my fileshttp://www.speedyshare.com/m38eN/New-folder-2.rar Edited April 16, 2014 by sw7x Link to comment Share on other sites More sharing options...
newseed Posted April 16, 2014 Share Posted April 16, 2014 It seems that you want the image to take up about 25% of the total width of the main div. If so, what you might can do is wrap a second div specifically for the image <div class="certificate"> <div class="img-box"> <img src="images/roundlogo.jpg" alt=""> </div> </div> You then set the img-box div to be width: 25%; You still keep your css for the image at width: 100%. 1 Link to comment Share on other sites More sharing options...
sw7x Posted April 22, 2014 Author Share Posted April 22, 2014 It seems that you want the image to take up about 25% of the total width of the main div. If so, what you might can do is wrap a second div specifically for the image <div class="certificate"><div class="img-box"><img src="images/roundlogo.jpg" alt=""></div></div> You then set the img-box div to be width: 25%; You still keep your css for the image at width: 100%.thnks got it 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