过渡背景图像宽度但保持高度答案

【问题标题】：Transition background image width but maintain height过渡背景图像宽度但保持高度
【发布时间】：2015-01-24 22:45:05
【问题描述】：

首先是图片

图片长200px，高50px。如果我将鼠标悬停在图像上，宽度应更改为 300px 并带有过渡效果。目前，如果我将图像悬停在新的高度和宽度上，而不仅仅是宽度。我怎样才能改变它？

这里是jsfiddle + 代码

*{
    margin: 0px;
    padding: 0px;
}

.eins{
    background-image: url(http://img3.fotos-hochladen.net/thumbnail/einse402yr1bzf_thumb.jpg);
    background-size: 100%;
    height: 50px;
    width: 200px;
    transition: all 0.5s;
}

.eins:hover{
    width: 300px;
}

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>


    </head>
    
    <body>
        
        <div class="eins">
        </div>
    
    
    </body>
</html>

【问题讨论】：

值得注意的是，在这种特殊情况下，通过在右侧使用红色背景和红色三角形图像可以获得更好的结果。这将消除失真伪影。
jsfiddle.net/isherwood/oo1eb14c
当然。如果你谷歌一下，你会找到单独使用 CSS 的方法。
@Skeptar - 以防你改变主意。 ---->Fiddle。 :)
@Skeptar - 当然。给我几分钟。

标签： html css

【解决方案1】：

你需要background-size: 100% 100% 而不是background-size: 100%。

* {
  margin: 0px;
  padding: 0px;
}
.eins {
  background-image: url(http://img3.fotos-hochladen.net/thumbnail/einse402yr1bzf_thumb.jpg);
  background-size: 100% 100%;
  height: 50px;
  width: 200px;
  transition: all 0.5s;
}
.eins:hover {
  width: 300px;
}

<html>
<head>
  <link href='index.css' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="eins">
  </div>
</body>
</html>

【讨论】：

@Skeptar - 不客气。 :)
你能再帮我一次吗？ :D "isherwood" 写道 -> 值得注意的是，在这种特殊情况下，通过在右侧使用红色背景和红色三角形图像，您可以获得更好的结果。这将消除失真伪影image，但我不知道如何正确使用它。
@Skeptar - 是的，您需要什么帮助？
isherwood 给了我一个 jsfiddle ：/ 我应该等下一次。对不起！不过谢谢你的帮助！
@Skeptar - 我会给你另一个没有任何图像的小提琴，只使用 CSS。 :)