放置在 div 容器内的图像的高度 - CSS
Posted
技术标签:
【中文标题】放置在 div 容器内的图像的高度 - CSS【英文标题】：Height of the Image placed inside div container - CSS 【发布时间】：2014-05-08 02:52:33 【问题描述】：不幸的是，我在使用 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
【问题讨论】：
【参考方案1】：容器#cubeContainer 和#googleContainer 需要高度。尝试将高度设置为 100%
【讨论】：
是的，是的！这样可行！我认为这条规则：@media screen #cubeContainer , #googleContainer max-height: 80%;最大宽度：40%； 将在 IE 中设置容器高度，当我按下 F12 并检查元素属性时 - 容器似乎没问题。再次感谢:)【参考方案2】：尝试通过此规则更改图像的尺寸：
div#cubeContainer img
div#googleContainer img
【讨论】：
以上是关于放置在 div 容器内的图像的高度 - CSS的主要内容，如果未能解决你的问题，请参考以下文章
CSS：如何将文本集中在 div 容器内的多个图像上？ [复制]