不幸的是我用CSS设置图像高度有问题,我搜索了很多地方,但没有找到帮助的答案.让我解释一下这个问题.我有以下CSS(它的工作原理)：
#cube
{
position: absolute;
max-width: 80%;
top: 50%;
left: 50%;
border-radius: 3px;
Box-shadow: 0 3px 6px rgba(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%);
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.9);
}
#cube:hover,#google:hover {
Box-shadow: 0 0px 1px rgba(0,0.9);
}
#googleContainer
{
position: absolute;
top: 50%;
left: 60%;
text-align : center;
}
#googleContainer
{
top: 50%;
left: 60%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-10%,#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.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>
问题开始:(图像的高度保持不变.
以下是这些网站：
解决方法
容器#cubeContainer和#googleContainer需要高度.尝试将高度设置为100％
