Jump to content

scaling small image with aspect ratio inside the parent div- responsive web design


sw7x
 Share

Recommended Posts

there is a div id =certificate and inside that div there is a image ,image height < div heightpicture below shown theseactual sizes of div,imagej0rg3.jpgfor 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 belowUntitled.pngfor 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 belowitA1p.pngfor 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 by sw7x
Link to comment
Share on other sites

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%.

  • Like 1
Link to comment
Share on other sites

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 :D
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...