css 如果子div正在旋转，如何将带有背景图像的div放入父容器而不引起滚动？

8hhllhi2 于 2023-01-14 发布在其他

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

我有这个超级基本的最小演示，它显示了一个正方形的图像与边界半径，使它看起来像一个圆。然后慢慢旋转。然而，因为它是一个正方形，因为它旋转，因为它进入对角线，水平宽度增长和收缩回来，重复。这是导致父大小调整。我不希望父大小调整，我希望父保持100%的宽度，并将内容放入其中。请在此处查看问题（图片由this提供）：

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container {
  display: flex;
  flex-shrink: 0;
  padding: 64px;
  width: 100vw;
}

.bg-image {
  background-image: url(https://i.imgur.com/9mhwcLH.png);
  background-size: contain;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: spin 512s linear infinite;
  animation: spin 512s linear infinite;
  height: 0;
  padding-top: 100%;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}

<div class="container">
  <div class="bg-image"></div>
</div>

有两种方法可以工作，我没有一个偏好如何解决它，任何一种方式都适合我。
1.因为它被雕刻成一个圆形，父代的宽度应该永远不会改变（因为它是一个圆形...），即使底层的div仍然是一个正方形...这意味着正方形div宽度的改变应该不会影响父代。
1.或者，如果可能的话，你可以缩小子对象，使其与父对象成45度角，然后再旋转，使其比父对象更小。无论哪种方法都有效，知道如何做这两种方法都是非常有利和有帮助的，所以我可以选择合适的时机，但知道一种方法也足以解决我的问题。
有什么想法可以解决这个问题，让它工作，而不是调整父（使父宽度是恒定的，或使子不影响父宽度）？

css

来源：https://stackoverflow.com/questions/75104624/how-to-fit-div-with-background-image-into-a-parent-container-without-causing-sc

2条答案

按热度按时间

rkttyhzu1#

我做了一些更改来继承父对象的高度和宽度。
请注意，父对象的高度和宽度的比例为1：1，因此子对象的半径与您预期的相同

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container {
  display: flex;
  flex-shrink: 0;
  padding: 64px;
  height:300px;
  width: 300px; /* parent height and with will be in ratio of 1:1*/
}

.bg-image {
  background-image: url(https://i.imgur.com/9mhwcLH.png);
  background-size: contain;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: spin 512s linear infinite;
  animation: spin 512s linear infinite;
  height: 0;
  /*padding-top: 100%;*/
  background-size: contain;
  /*position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;*/
  border-radius: 50%;
  width:100%;
  height:100%;/* inherits the parent's height and width */
}

<div class="container">
  <div class="bg-image"></div>
</div>

赞(0）回复(0）举报 2023-01-14

nue99wik2#

你可以按如下方法修剪容器的溢出部分

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container {
  display: flex;
  flex-shrink: 0;
  padding: 64px;
  width: 100vw;
  overflow-x: clip;
}

.bg-image {
  background-image: url(https://i.imgur.com/9mhwcLH.png);
  background-size: contain;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: spin 512s linear infinite;
  animation: spin 512s linear infinite;
  height: 0;
  padding-top: 100%;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}

<div class="container">
  <div class="bg-image"></div>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如果子div正在旋转，如何将带有背景图像的div放入父容器而不引起滚动？

2条答案

相关问题

热门标签

最新问答