中心响应率div
问题描述：
我想为我的家庭自动化系统创建Web应用程序，但是我的房子img有问题。中心响应率div
我想要的是有我的房子的中心（verticaly和horizontaly）图像，响应和仍然在图像的比例。
首先我尝试：
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
margin: 0 auto;
}
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
text-align: left;
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position:relative;
}
<div class="container">
<div class="rect">
</div>
</div
工作的伟大，但没有verticaly中心。
所以我尝试添加一些绝对定位：
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
text-align: left;
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position:relative;
}
<div class="container">
<div class="rect">
</div>
</div>
但如何中心.rect到.container？
非常感谢。
编辑：
我忘了精确的，我需要把我的DIV形象，保持位置上。
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
text-align: left;
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position:relative;
}
.rect2 {
width: 3%;
padding-bottom: 3%;
position: absolute;
top: 40%;
left: 31.5%;
background-color: blueviolet;
border-radius: 100px;
}
.rect4 {
width: 3%;
padding-bottom: 3%;
position: absolute;
top: 25%;
left: 60%;
background-color:rgba(0, 0, 0, 0.6);
border-radius: 100px;
}
.rect3 {
width: 50%;
height:50%;
background-image: url('images/light.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 25%;
left:32%;
}
代码
<body>
<div class="container">
<div class="rect">
<div class="rect2"><div class="rect3"></div></div>
<div class="rect4"><div class="rect3"></div></div>
</div>
</div>
</body>
答
您可以使用transform:translate（CSS3）
CSS
body {
color: #000;
background: #3A3D50;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 100%;
height: 50%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rect {
position: relative;
display: block;
height: 350px; // Adjust your needs
width: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url('http://www.bashihq.com/wp-content/uploads/2015/08/3d-house-floor-plans-modern-3d-floor-plans-are-also-a-great-way-for-architects-realtors-and-at-house-floor.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
+0
不错只有一个问题是我的手机风景上的图像大小 – Hydro
+0
您可以在高度中使用百分比，而在px中使用固定高度。在.rect元素上。也许它有帮助...尝试身高：150％; - http://jsfiddle.net/hLt5rguq/9/ - 尽量调整您的需求。 –
寻求这样的东西[** JSFiddle **]（http://jsfiddle.net/vivekkupadhyay/unvshyw8/3）？ – vivekkupadhyay
谢谢它的工作原理:) – Hydro
我有一个新问题，之前我可以在绝对位置上添加项目在我的图像上，因此请注意屏幕尺寸始终位于同一图像位置。现在，当我在绝对位置的矩形内添加div时，位置会随着屏幕大小而改变。 – Hydro