Question

图像保持完整尺寸，我需要它适合其div。

我还想知道如何在父母的内部并排设置2个div，保持其位置的90％。

以下是：

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="test">
    <div id="test2">
        <div id="test3">
               <div id="image"><img src="ayreon_wallpaper_the_human_equation_brain_1600.jpg" />
               </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

body{
background:#999;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#test{
width:90%;
height:90%;
background:#1d2122;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test2{
width:90%;
height:90%;
background:#3F0;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test3{
float:left;
width:90%;
height:90%;
background:#F00;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#image{
float:left;
width:90%;
height:90%;
background:#F00;
background-size:100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Answer 1

将您的css选择器从#image更改为#image img

示例：http://jsfiddle.net/justincook/XFV5N/

问题是你正在调整图像周围的div，而不是图像本身。通过更新CSS来设置img标记的样式，可以解决问题。

要将div设置为彼此旁边，您可以将它们设置为display:inline; width:50%或float:left; width:50%

详细了解float / inline：float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

如何在调整为父div的百分比的div中调整图像大小？

1 个答案: