如何在Materialize CSS滑块中调整图像大小以适应界面？

Question

我正在使用Materialize CSS滑块，但我在滑块中使用的图像不会自动调整大小以适应，只有图像的一半显示在滑块中。 我尝试了多个CSS规则来解决这个问题，但什么都不起作用。这个问题只涉及高度。

这是我到目前为止尝试过的CSS：

.first_image{
    height 100%;
    max-height:100%;
    object-fit: contain;
}

以下是相关HTML代码：

这是相关的HTML代码：

<section class="slider">
    <ul class="slides">
        <li>
            <img src="./img/business1.jpg" alt="" class="first_image">
        </li>
    </ul>
</section>

我还在这里的codepen上添加了代码，请查看。

- random-xyz

---

你只使用CSS或Bootstrap吗？ - WasiF

我正在使用CSS和Materialize CSS框架，具体来说是滑块JavaScript组件。 - random-xyz

什么问题？你的CodePen运行良好。另外，任何声明一个名为img-responsive的新解决方案都可以忽略 - Materialize已经有了一个img-responsive类：https://materializecss.com/media-css.html - Sean Doherty

Answer 1

您应该设置

.img-responsive {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

<img class="img-responsive" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Image" />

- WasiF

---

非常感谢您的帮助，但是还是没有解决问题。整个图像仍然没有显示出来。我已经在这里更新了我的问题，包括在CodePen上的代码，请查看一下是否可以帮忙。 - random-xyz

object-fit只适用于宽度和高度都设置为100%的图片，并且在IE中无法识别。https://caniuse.com/#search=object%20fit - Sean Doherty

Answer 2

CSS 代码

.slider .slides .img-responsive{

  max-width: 100%;
  height: 900px;

}

JS 代码

  //init slider
  $('.slider').slider({
    indicators: true,
    height: 900,
    transition: 500,
    interval: 6000
  });

实际上，img和slider的高度应该匹配。如果它对您来说太大了，您可以直接从源头（即img文件夹）调整图像本身的大小。

- Brayan P. G

---

乍一看似乎是错误的答案，请进行更多的研究，无需使用JS，使用CSS即可。 - Matan Sanbira

Answer 3

好的，两件事：

#1 Materialize已经有了一个响应式图片类：

// Images
img.responsive-img,
video.responsive-video {
  max-width: 100%;
  height: auto;
}

在globals.scss文件中的第156-162行。

https://materializecss.com/media-css.html

无论如何，当我刚刚检查了CodePen时，图片都是全宽的。我从图像本身中删除了额外的img-responsive声明和类，并且在Chrome中仍然可以正常工作。

https://codepen.io/doughballs/pen/XWbmvbE

#2 Materialize使用背景图像作为其滑块

Materialize滑块仅使用图像标签获取图像的src，然后将其应用于img标签的背景中。因此，img-responsive无关紧要。以下是全屏幻灯片演示的实际代码：

<ul class="slides">
    <li class="" style="opacity: 0.0568148; transform: translateX(0px) translateY(0px);">
      <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url(&quot;https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&amp;auto=compress,format&amp;fit=crop&amp;w=1199&amp;h=799&amp;q=80&amp;cs=tinysrgb&amp;crop=&quot;);"> <!-- random image -->
      <div class="caption center-align" style="opacity: 0.0568148; transform: translateY(-94.3185px);">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li class="active" style="opacity: 0.943185; transform: translateX(0px) translateY(0px);">
      <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url(&quot;https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&amp;fm=jpg&amp;s=0e993004a2f3704e8f2ad5469315ccb7&quot;);"> <!-- random image -->
      <div class="caption left-align" style="opacity: 0; transform: translateX(-100px) translateY(0px);">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li style="opacity: 0; transform: translateX(0px) translateY(0px);" class="">
      <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url(&quot;https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&amp;fm=jpg&amp;s=6a4fc66161293fc4a43a6ca6f073d1c5&quot;);"> <!-- random image -->
      <div class="caption right-align" style="opacity: 0; transform: translateX(100px);">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </ul>

如果你深入研究CSS，就会发现它已经强制图片全宽显示：

.slider .slides li img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

- Sean Doherty