logo标签列表

图片在div容器中的高度 - CSS

cssimageheight
8

不幸的是，我在使用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

2个回答
11

容器 #cubeContainer 和 #googleContainer 需要设置高度。尝试将高度设置为 100%。

是的，没错！这个方法可行！我之前以为这段规则: @media screen { #cubeContainer , #googleContainer { max-height: 80%; max-width: 40%; } }可以设置容器的高度，在IE浏览器中按F12打开检查元素属性时，容器的高度看起来没问题。再次感谢:) - Kyniek
0
尝试通过以下规则更改图像的尺寸：
div#cubeContainer img{}
div#googleContainer img{}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接