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

从我看到的小提琴来看，代码似乎可以正常工作。如果我将显示窗格调整为全尺寸，则会看到整个图像。我可以慢慢减小它的大小，然后随着窗口变小，它会自动调整大小，但是在767px时，它会向后拉伸。

我想说，您可能需要缩小该图像的宽度为767px，并更新您的max-width：768媒体查询以将原始图像替换为较小的图像。

Answer 3

您尝试遵循CSS：

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

使背景图像合适而不会剪切/拉伸图像

3 个答案: