css 将背景图像剪成两半

4urapxun 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(115)

我有一个带背景图像的块。而对于小屏幕我需要使它，使这张图片被切断了50%，并在同一时间占据整个块
我试着做background-size: 50% 100%;，但最终图片没有被裁剪，只是占据了整个块的50%。

.wrapper {
  width: 500px;
  height: 300px;
  background-image: url("https://i.imgur.com/e1kYBwm.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 575px) {
  .wrapper {
    background-size: 50% 100%;
  }
}

<div class="wrapper"></div>

css

来源：https://stackoverflow.com/questions/75827106/crop-the-background-image-in-half

1条答案

按热度按时间

7lrncoxx1#

你可以将背景水平缩放200%而不是50%，我想这正是你想要的效果。但如果不是，你能不能给予更多的细节和背景说明你想要达到的效果，因为我不确定我是否理解整个问题。

.wrapper {
  width: 500px;
  height: 300px;
  background-image: url("https://i.imgur.com/e1kYBwm.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 575px) {
  .wrapper {
    background-size: 200% 100%;
  }
}

<div class="wrapper"></div>

赞(0）回复(0）举报 2023-03-24

我来回答

css 将背景图像剪成两半

1条答案

相关问题

热门标签

最新问答