Question

我想在我的网站上使用MaterialiseCSS轮播。它需要跨越页面的整个宽度，但高度不能低于400px，在这种情况下，我想裁剪两侧，以便在窗口宽度缩小时将旋转木马高度保持在400px。

这是我尝试过的：

＆＃13;

.carousel {
      min-height: 400px;
    }

＆＃13;

    <div class="carousel carousel-slider center" data-indicators="true">

      <div class="carousel-fixed-item center">
        <h1 class="header futural center white-text animated fadeInUp">Futural</h1>
        <div class="row center">
          <h5 class="header col s12 light white-text animated fadeInUp delay-animation">Fabricant de menuiserie aluminium à haute performance énergétique</h5>
        </div>
        <div class="row center">
          <a href="{{ site.baseurl }}/about.html" class="btn waves-effect white grey-text darken-text-2 animated fadeInUp delay-button">Nous contacter</a>
        </div>
      </div>

      <a class="carousel-item" href="#one!"><img class="img-responsive" src="http://via.placeholder.com/1000x340/f44336/b71c1c"></a>
      <a class="carousel-item" href="#two!"><img src="http://via.placeholder.com/1000x340/4caf50/1b5e20"></a>
      <a class="carousel-item" href="#three!"><img src="http://via.placeholder.com/1000x340/ffeb3b/f57f17"></a>
      <a class="carousel-item" href="#four!"><img src="http://via.placeholder.com/1000x340/2196f3/0d47a1"></a>
    </div>

＆＃13;

但是这个解决方案似乎只能修复carousel-fixed-item元素的大小。图像保持相同的比例，并在固定元素后面收缩。

你看到这个问题的解决方案了吗？在此先感谢：）

Answer 1

使用background-image与background-size : cover（MDN link）一起显示覆盖整个元素的图像而不会丢失图片的宽高比，background-position : center可让您居中元素内的图片。

正在运作的JSFiddle的链接：https://jsfiddle.net/7kvtyahj/2/

CSS

.carousel {
  min-height: 400px;
}

.carousel-item
{
  background-size : cover;
  background-position: center;
}

.c1
{
  background-image : url(' http://via.placeholder.com/1000x340/2196f3/0d47a1');
}

.c2
{
  background-image : url(' http://via.placeholder.com/1000x340/4caf50/1b5e20');
}

.c3
{
  background-image : url(' http://via.placeholder.com/1000x340/2196f3/0d47a1');
}

 .c4
{
  background-image : url(' http://via.placeholder.com/1000x340/4caf50/1b5e20');
}

HTML

<div class="carousel carousel-slider center" data-indicators="true">
  <div class="carousel-fixed-item center">
    <h1 class="header futural center white-text animated fadeInUp">Futural</h1>
    <div class="row center">
      <h5 class="header col s12 light white-text animated fadeInUp delay-animation">Fabricant de menuiserie aluminium à haute performance énergétique</h5>
    </div>
    <div class="row center">
      <a href="{{ site.baseurl }}/about.html" class="btn waves-effect white grey-text darken-text-2 animated fadeInUp delay-button">Nous contacter</a>
    </div>
  </div>

  <a class="carousel-item c1" href="#one!"></a> <!--Notice that I removed the <img> tags and added the classes c1, c2, c3 and c4 in the <a> elements -->
  <a class="carousel-item c2" href="#two!"></a>
  <a class="carousel-item c3" href="#three!"></a>
  <a class="carousel-item c4" href="#four!"></a>
</div>

给MaterialiseCSS轮播提供最小高度

1 个答案: