0

here 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%;    
    }

}

there is a div id =certificate and inside that div there is a image ,image height < div height

picture below shown these 1)actual sizes of div,image 2)whats happening when image width=100% http://s18.postimg.org/argg1rmrt/ssss.png

for 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 below http://s15.postimg.org/4dgnma7d7/Untitled.png

for that i used for image width 100% but it has a another effect on image width it is image take all the width of certificate div.

i need a way to keep aspect rato of the image and also image will not exceed the parent div size

Susantha7
  • 898
  • 1
  • 20
  • 38
  • have you seen at http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio or http://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio or http://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio ? – Fabrizio Calderan Apr 07 '14 at 09:10
  • You can try with #certificate img {max-width:100%;} instead width:100%; – Pravin W Apr 07 '14 at 09:38

0 Answers0