Menu
unfortunately I have problem with setting image height with CSS, I've searched many places but found no answer that helped. Let me explain the problem. I have following CSS (it works) :
#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>
for the image :
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
It's working fine - but there is no container. When I added container in order to position text... :
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%;
}
}
For following elements :
<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>
Problem begins :( Image's height remains unchanged.
Here are those sites :
http://vr.fotomilo.pl/
http://vr.fotomilo.pl/vr.aspx
493
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Containers #cubeContainer and #googleContainer need height. Try to set height to 100%
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
