css悬停图像的动作答案

【问题标题】：Action for image on hover by csscss悬停图像的动作
【发布时间】：2017-10-13 00:19:34
【问题描述】：

我有一个关于 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%;
}

所以在这个例子中一切正常。当我将鼠标悬停在图像上时，图像被缩放。但是我有很多这样的图像，SEO 对每个图像 div 都使用它并不好，我想使用标签，但没有像“背景大小”这样的东西。有没有办法用img做到这一点？

【问题讨论】：

是的，还有另一种方法。您可以使用 img 标签赋予 `scale 属性来缩放效果。
我试过了，但结果不是我想要的。当我使用 background-size 属性时，div 的尺寸没有改变，只有尺寸，但是当我使用 transform scale 时，尺寸也增加了。
请看我的回答。我认为这对您有帮助。
感谢您的帮助，但不是因为我想做其他事情。我希望这张图片在悬停时具有相同的 250x250 像素，但是在悬停时应该更改它的缩放比例。
你想做什么..？你能给我解释一下吗？

标签： image css responsive

【解决方案1】：

试试这个：

.image {
    width: 250px;
    height: 250px;
    margin: 100px;

}

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

&lt;img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA"&gt;

【讨论】：

你建议的问题是，当我对图像使用缩放时，它会增加图像的特殊尺寸，在我的情况下宽度：250px 和高度：250px；但我想成为同一个维度，并在悬停时放大。
你要放大镜吗？
不完全是。请查看问题下方的 cmets。我已经解释了我想要更好的东西。

【解决方案2】：

请试试这个。我已经按比例属性完成了。

.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>

【讨论】：

【解决方案3】：

希望这个 sn-p 对你有所帮助。

.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);
}

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

【讨论】：

【解决方案4】：

我并没有真正得到你想要实现的目标，而是在你的代码中

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

在显示上等同于

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

【讨论】：