不幸的是，我在用CSS设置图像高度时遇到了问题，我搜索了很多地方，但没有找到有帮助的答案。让我解释一下这个问题。我有以下CSS(有效):
#cube
{
position: absolute;
max-width: 80%;
top: 50%;
left: 50%;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
text-align : center;
}
#cube
{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen {
#cube {
max-height: 80%;
max-width: 80%;
}
}
</style>
对于图像:
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
一切正常-但没有容器。当我添加容器以放置文本...时:
html, body {
height: 100%;
margin: 0;
padding: 0;
color: black;
font-family : Arial;
}
#cubeContainer
{
position: absolute;
top: 10%;
left: 10%;
text-align : center;
}
#cubeContainer
{
top: 50%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-90%, -60%);
}
#cube, #google {
position : relative;
top : 0px;
left : 0px;
max-width: 100%;
max-height: 100%;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
#cube:hover, #google:hover {
box-shadow: 0 0px 1px rgba(0,0,0,0.9);
}
#googleContainer
{
position: absolute;
top: 50%;
left: 60%;
text-align : center;
}
#googleContainer
{
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-10%, -60%);
}
#cube, #google {
position : relative;
top : 0px;
left : 0px;
max-width: 100%;
max-height: 100%;
margin-bottom : 10px;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
#cube:hover, #google:hover {
box-shadow: 0 0px 1px rgba(0,0,0,0.9);
}
@media screen {
#cubeContainer , #googleContainer {
max-height: 80%;
max-width: 40%;
}
}
对于以下元素:
<body>
<div id="cubeContainer">
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
<a id="cube_a" href="#">Wirtualne wycieczki</a>
</div>
<div id="googleContainer">
<img src="res/googleview.png" class="ri" id="google"/><br />
<a id="A1" href="#">Business View w mapach Google</a>
</div>
</body>
问题开始了:(图像的高度保持不变。
这些是这些网站:
http://vr.fotomilo.pl/
http://vr.fotomilo.pl/vr.aspx
最佳答案
容器#cubeContainer和#googleContainer需要高度。尝试将高度设置为100％