更改元素相对于自身的大小

Question

我想更改HTML元素的大小，即div相对于自身

 <div class="visual-cue" style="height:100px ;width:100px">
 </div>

现在在CSS中我想做类似的事情

 .visual-cue:hover{
      /* change the height to 90% of current height and same for width
      */
  }

我想在没有javascript的情况下这样做。现在正在使用          宽度：90％

不起作用。

Answer 1

如果您的意思是屏幕的90％（视口），您可以使用vw作为一个单位：

.visual-cue {
  height:100px;
  width:100px;
  background: yellow;
}

.visual-cue:hover {
  width: 90vw;
  height: 90vw;
}

.smoothsize {
  transition-duration: .5s;
}

 <div class="visual-cue smoothsize">X
 </div>

或者，如果您的原始尺寸为90％，请使用transform: scale(0.9)：

.visual-cue {
  height:100px;
  width:100px;
  background: yellow;
}

.visual-cue:hover {
  transform: scale(0.9);
}

.smoothsize{
  transition-duration: .5s;
}

<div class="visual-cue smoothsize">X
 </div>

Answer 2

可以使用：

  .visual-cue:hover{
    transform:scale(0.9,0.9)
   }

fiddle