如何制作缩放css只是图像

Question

我需要放大图片，但我使用background-url将相当于：

.fakeImg:hover img{
    transform: scale(1.1);
}

但我只希望图片在div

内生长

当前状态：

目的：

jsfiddle

Answer 1

缩放将起作用，但您需要将overflow: hidden设置为图像的父（帧）。

以下是一个例子：

.container {
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.image {
  width: 200px;
  height: 200px;
  background-image: url("https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: 200px 200px;
  transition: 1s all;
}

.image:hover {
  transform: scale(1.1);
}

<div class="container">
  <div class="image"></div>
</div>

Answer 2

您可以调整background-size代替scale来仅更改 background-image

＆＃13;

＆＃13;

.box {
 width:150px;
 height:150px;
 margin:50px;
 border:2px solid red;
 background-image:url("https://picsum.photos/400/400?image=1068");
 background-size:100% 100%;
 background-position:center;
 transition:1s all;
}
.box:hover {
 background-size:130% 130%;
}

＆＃13;

<div class="box">

</div>

＆＃13;

＆＃13;

＆＃13;