放置在div容器內的圖像高度 - CSS

不幸的是我用CSS設置圖像高度時遇到問題，我搜索了很多地方，但沒有找到有幫助的答案。讓我解釋一下這個問題。我有下面的CSS（它的工作原理）：放置在div容器內的圖像高度 - 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/vr.aspx

來源

2014-03-28 Kyniek

集裝箱#cubeContainer和#googleContainer需要的高度。嘗試將高度設置爲100％

來源

2014-03-28 15:37:42 Vel

是的！這樣可行！我認爲這條規則： @media screen { #cubeContainer，#googleContainer max-height：80％; max-width：40％; } } 將設置容器的高度，在IE中當我按下F12和選中的元素屬性 - 容器看起來沒問題。再次感謝：） – Kyniek

嘗試通過這一規則改變圖像的尺寸：

div#cubeContainer img{} 
div#googleContainer img{}

來源

2014-03-28 15:02:58

放置在div容器內的圖像高度 - CSS

回答

相關問題