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

我想改变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%
不起作用。

最佳答案

如果您是指屏幕（视区）的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>

关于html - 更改元素相对于其自身的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31770367/