Question

我有一个关于css的问题。这是一个例子。 HTML：

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

css：

.image {
    width: 250px;
    height: 250px;
    background-image: url(image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image:hover {
    background-size: 120% 120%;
}

所以在这个例子中一切正常。当我将鼠标悬停在图像上时，图像会被缩放。但是我有很多像这样的图像，并且它对于每个图像div使用SEO都不好，我想使用＆lt; img＆gt;标签，但没有＆＃34;背景大小＆＃34;。有没有办法用img这样做？

Answer 1

试试这个：

＆＃13;

.image {
    width: 250px;
    height: 250px;
    margin: 100px;

}

.image:hover {
    transform: scale(1.5);
}

＆＃13;

<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">

＆＃13;

Answer 2

请试试这个。我已经完成了scale属性。

.image{
  display:inline-block;
  width:200px;
  height:200px;
}
.image img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  -webkit-transition:0.5s;
  transition:0.5s;
}
.image:hover img {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

<div class="image">
  <img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>

Answer 3

希望这段代码可以帮助你。

＆＃13;

.image{
  display:inline-block;
  width:250px;
  height:250px;
  overflow: hidden;
}
.image img{
  width:100%;
  height:100%;
  transition:all 0.5s ease;
}
.image:hover img {
  transform:scale(1.2);
}

＆＃13;

<div class="image">
  <img src="https://dummyimage.com/250x250/000/fff" alt="" />
</div>

＆＃13;

Answer 4

我在你的代码中并没有真正得到你想要的东西

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

在显示中相当于

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

通过css悬停图像的操作

4 个答案: