Question

我在CSS3中创建转换时遇到问题。我有一个div块，它有一个用CSS形成圆圈的图像，并且在一些文本下面。每当我悬停一个块，圆圈和图像调整大小时，我就设法做到了这一点，但我无法做到我想做的事情。我想这样做只有圆形比例，但图像保持相同的大小。你能帮我么。我将非常感激。

我的HTML代码

<div id="Vsebina">
    <div class="storitve"><div class="okrogel"> <img src="Slike/night.jpg"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
  </div>

使用Vsebina而不是

部分

storitve是一个块

okrogel是一个包含图像的圆形div块

我的CSS代码看起来像（我现在只使用灰色背景来查看它们的位置）

.storitve {
    width:30.3%;
    margin:1.5%;
    height:400px;
    background:grey;
    float:left;
}

.okrogel img {
    max-height:100%;
    border-radius:50%;
    display:block;
    position:relative;
}

.storitve:hover .okrogel{
    transform:scale(1.25,1.25);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}

.okrogel {
    width:200px;
    height:200px;
    margin:0 auto;
    margin-top:10px;
}

Answer 1

将此添加到您的CSS。

悬停正在强制图像转换。

因此强制它再次转换为原始分辨率：

.storitve:hover .okrogel img{
    transform: scale(0.80, 0.80);  !important;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}

你可以调整0.80，直到得到你想要的结果。

.storitve {
    width:30.3%;
    margin:1.5%;
    height:400px;
    background:grey;
    float:left;
}

.okrogel img {
    max-height: 200px;
    max-width:  200px;
    border-radius:50%;
    display:block;
    position:relative;
}

.storitve:hover .okrogel{
    transform:scale(1.25,1.25);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}
.storitve:hover .okrogel img{
    transform: scale(0.80, 0.80);  !important;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}


.okrogel {
    width:200px;
    height:200px;
    margin:0 auto;
    margin-top:10px;
    background: rgba(0,0,255, 0.7);
}

<div id="Vsebina">
    <div class="storitve"><div class="okrogel"> <img src="http://www.freeiconspng.com/uploads/firefox-logo-icon-15.png"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Internet_Explorer_9_icon.svg/2000px-Internet_Explorer_9_icon.svg.png"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png"></div></div>
  </div>

CSS转换无法正常工作（调整图像大小）

1 个答案: