首先是图片
图片长 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>最佳答案
您需要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>关于html - 过渡背景图像宽度但保持高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28131126/