时间戳

首页 > 解决方案 > css 绝对没有涵盖所有内容

css - css 绝对没有涵盖所有内容

问题描述

我怎样才能让我的幻灯片占据整个宽度？

@keyframes slider {
0% {
	left: 0;
}
25% {
	left: 0;
}
50% {
	left: -100%;
}
75% {
    left: -100%;
}
100% {
		right: -200%;
}
}
#slider {
	overflow: hidden;
}
#slider figure img {
	width: 20%;
}
#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 20s slider infinite;
}
	<div id="slider" >
	<figure>
	<img src="webagency_images/images/slider/bg1.jpg">
	<img src="webagency_images/images/slider/bg2.jpg">
	</figure>
	</div>

我尝试使用绝对，但它涵盖了我不想要的标题部分......

如果您愿意，可以在这里查看正在建设的网站。

先感谢您。

标签： csshtml

解决方案

您需要将您的设置body为width: 100vw;. 如果添加margin: auto，您将不知道需要移动多少滑块才能使其达到 的全宽body（并且不将其设置为position: absolute）。

我建议您删除主体上的边距并使其全视口宽度。然后，你可以这样做：

  • 使滑块全宽（width: 100%或width: 100vw）
  • 使figure两倍的父大小 ( width: 200%)
  • 使每个img滑块的大小（这是大小的一半figure）（width: 50%）
  • 将 更改figure为具有行方向且不换行的 flex 元素
  • 使动画工作translate3d而不是leftandright因为我们使用静态位置（默认位置）

您还需要更改主体的一些子元素，以纠正其宽度发生变化的事实：

  • 制作header& .service_content width: 90%;。它应该保持居中，因为body已经display: flex; align-items: center;设置。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
}

@keyframes slider {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
  75% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slider figure {
  margin: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}


/* things you need to change */

body {
  width: 100vw;
  margin: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header,
.service_content {
  width: 90%;
}

.slider {
  width: 100%;
  overflow: hidden;
}

.slider figure {
  display: flex;
  align-items: flex-start;
  width: 200%;
  overflow: hidden;
}

.slider figure img {
  width: 50%
}
<!-- Section Slider -->
<div id="slider" class="slider">
  <figure>
    <img src="https://brunoc.ovh/webagency/webagency_images/images/slider/bg1.jpg">
    <img src="https://brunoc.ovh/webagency/webagency_images/images/slider/bg2.jpg">
  </figure>
</div>

推荐阅读