이미지의 높이가 div 컨테이너 안에 배치되었습니다 - CSS

불행히도 CSS로 이미지 높이를 설정하는 데 문제가 있습니다. 많은 장소를 검색했지만 도움이되는 답변이 없습니다. 문제를 설명해 드리겠습니다. 그것은 잘 작동하고이미지의 높이가 div 컨테이너 안에 배치되었습니다 - CSS

<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />

-하지만 용기가 없다 : 이미지의

#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>

: 나는 (그것을 작동) CSS를 다음했다. 내가 ... 텍스트를 배치하기 위해 컨테이너를 추가하는 경우 : 다음과 같은 요소에 대한

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/

이 규칙을 통해 이미지의 크기를 변경

출처

2014-03-28 Kyniek

컨테이너 #cubeContainer 및 #googleContainer 높이가 필요합니다. 높이를 100 %로 설정하십시오.

출처

2014-03-28 15:37:42 Vel

예 예! 그게 효과가있어! 나는 그 규칙을 생각했다 : @media 화면 { # cubeContainer, #googleContainer { max-height : 80 %; 최대 너비 : 40 %; } } 은 F12 키를 누르고 요소 속성을 검사 할 때 IE에서 컨테이너 높이를 설정합니다. 컨테이너는 괜찮은 것처럼 보였습니다. 다시 한번 감사드립니다 :) – Kyniek

시도 :

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

출처

2014-03-28 15:02:58

이미지의 높이가 div 컨테이너 안에 배치되었습니다 - CSS

답변

관련 문제