Question

我正在尝试制作一个60％宽度的图像滑块，html代码如下：

.wrapper {
  width: 80%;
  height: 1000px;
  margin: auto;
}

.slider-wrapper {
  position: absolute;
  width: 60%;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image: url('assets/img/slide1.jpg');
}

<body>
  <div class="wrapper">
    <div class="slider-wrapper">
      <div class="slide slide1">
        <span>slider1</span>
      </div>

      <div class="slide slide2">
        <span>slider1</span>
      </div>

    </div>
  </div>
</body>

但我设置的背景图片是扩展其容器的全宽，而不是60％。我想知道我在这里做错了什么？我应该将幻灯片类设置为display:inline属性吗？

Answer 1

试试这个：

.wrapper{
    position: relative;
    width: 60%;
    height: 1000px;
    margin: auto;
}
.slider-wrapper{
    position: absolute;
    width: 100%;
}
.slide{
    position: relative;
    display: inline-block;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slide1{
    background-image: url('assets/img/slide1.jpg');
}

Answer 2

我认为首先应该为.slider-wrapper定义高度，然后在.slide中添加宽度：100％和高度：100％

我认为这可以解决您的问题。

Answer 3

您的代码对我来说似乎没问题，每张幻灯片在80％包装中显示60％。

如果您参考下面的代码段，则灰色为.wrapper，显示80％，100％，粉红色图片为.slide，显示80％包装中的60％。

示例：

＆＃13;
＆＃13;
.wrapper{ width: 80%; height: 1000px; margin: auto; background: grey; } .slider-wrapper{ position: absolute; width: 60%; height:100%; } .slide{ background-size: cover; background-position: center; background-repeat: no-repeat; height:100%; } .slide1{ background-image: url('https://dummyimage.com/600x400/a32da3/fff'); }
＆＃13;
<div class="wrapper"> <div class="slider-wrapper"> <div class="slide slide1"> <span>slider1</span> </div> <div class="slide slide2"> <span>slider2</span> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您的代码工作正常。这里的问题是关于您没有内容来扩展您的.slider-wrapper。此外，您使用的图像不是<img>标记中的背景，因此它没有足够的空间来显示您的背景图像。因此，您必须将height设置为.slider-wrapper或更新某些内容，如下面的代码段所示。

.wrapper {
  width: 80%;
  height: 1000px;
  margin: auto;
}

.slider-wrapper {
  position: absolute;
  width: 60%;  
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image: url('https://ak.picdn.net/assets/cms/97e1dd3f8a3ecb81356fe754a1a113f31b6dbfd4-stock-photo-photo-of-a-common-kingfisher-alcedo-atthis-adult-male-perched-on-a-lichen-covered-branch-107647640.jpg');/*dummy image*/
}

<body>
  <div class="wrapper">
    <div class="slider-wrapper">
      <div class="slide slide1">
        <span>slider1</span>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
      </div>

      <div class="slide slide2">
        <span>slider2</span>
      </div>

    </div>
  </div>
</body>

无法使用div标签设置固定宽度

4 个答案: