html - 过渡背景图像的宽度，但保持高度

首先这是图片

图片长200像素，高50像素。如果我将鼠标悬停在图片上，则宽度应更改为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>

最佳答案

您需要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>