Question

我使用了Materialise css滑块，但我在滑块中使用的图像没有调整大小以适应，只有一半的图像显示在滑块中。我尝试了多个css规则来解决这个问题，但没有任何工作。问题只在于身高。

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

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

以下是HTML代码：

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

</ul>
</section>

我还在codepen here上添加了代码，请查看。

感谢先进的任何帮助。

Answer 1

你应该设置

＆＃13;

.img-responsive {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

＆＃13;

<img class="img-responsive" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Image" />

＆＃13;

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和滑块上的高度应该匹配。如果碰巧适合您，可以直接从图像来源（即img文件夹）调整图像本身的大小

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

无论如何，当我刚才检查代码笔时，图像为全宽。我从图像本身中删除了多余的img响应声明和类，它仍然适用于chrome。

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

＃2实体化为其滑块使用背景图像

Materialize滑块仅使用image标签获取图像的src，然后将其应用于img标签的背景。因此，响应img的内容与此处无关。以下是全屏滑块演示中的实际代码：

<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;
}

如何调整materialize css滑块内的图像大小以使其适合

3 个答案: