Question

这是我的代码html和css

html代码

<!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代码

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

}

有一个div id =证书，在div里面有一个图像，图像高度＆lt; div高度

下面的图片显示了这些 1）div的实际大小，图像 2）当图像宽度= 100％时发生什么 http://s18.postimg.org/argg1rmrt/ssss.png

用于响应式设计，当浏览器调整大小时图像大小需要变化。当浏览器宽度缩小图像需要很小而不改变其宽高比时。我的意思是它必须如下图所示 http://s15.postimg.org/4dgnma7d7/Untitled.png

我用于图像宽度100％，但它对图像宽度有另一个影响，它是图像占据证书div的所有宽度。

我需要一种方法来保持图像的方面，并且图像也不会超过父div大小

在父div响应式网页设计中缩放具有宽高比的小图像

0 个答案: