在不剪切/拉伸图像的情况下使背景图像适合

Question

我正在做这个项目，因为我必须在悬停每个子div/列时替换父div的背景图像。除了我设置的背景图像被剪掉或看起来被拉伸外，所有功能都很好。我已经尝试了很多例子和类似的问题，从堆栈溢出，似乎没有一个解决拉伸图像或切断问题的问题，我已经尝试过背景重复和背景定位等

background-image: url(https://www.dropbox.com/s/3pk8xl9lh6hl4x8/banner1.jpg?dl=1);
background-size: cover;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

我做错了什么。这是我的密码https://jsfiddle.net/jaisil007/4qxh5nrz/3/

Answer 1

您可以尝试此选项而不是background-size: cover;选项。

background-size: 100% 330px; /* fit for the size of the div... full width and 330px height */

Answer 2

从fiddle的情况来看，代码在一定程度上运行良好。如果将显示窗格调整为完全大小，则可以看到整个图像。我可以慢慢地调整它的大小，并看到随着窗口变小，它正在调整自己的大小，但在767px时，它会向后伸展。

我想说，你可能需要一个宽度为767px的图像的较小版本，并更新你的最大宽度：768媒体查询，用较小的图像替换原始图像。

Answer 3

您可以尝试以下css：

background-size: cover;
background-position: center center;
background-repeat: no-repeat;