图像保持完整大小，我需要它适合它的 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;
最佳答案
将您的 css 选择器从 #image 更改为 #image img
示例:http://jsfiddle.net/justincook/XFV5N/
问题是您调整的是图像周围的 div 大小，而不是图像本身。通过更新您的 CSS 以设置 img 标签的样式，您可以解决问题。
要将 div 设置为彼此相邻，您可以将它们分别设置为 display:inline;宽度:50% 或 float:left;宽度:50%
阅读有关 float /内联的更多信息:float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
关于css - 如何在调整为父 div 的百分比的 div 内调整图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20338007/