物化使滑块图像响应式
物化使滑块图像响应式
提问于 2015-06-12 19:53:17
我正在尝试用Materialize开发一个网站，在网站上有一个滑块。Materialize响应迅速，在不同的分辨率下都能很好地工作。但是，当我减小屏幕尺寸时，滑块宽度也在减小(这是理所应当的)。但其中的图像只是被裁剪，而不是缩放到滑块的大小。我在img中添加了responsive-img类，但没有任何变化。
滑块代码
<div class="slider">
<ul class="slides">
<li>
<img src="images/slider/slide_1.jpg">
<div class="caption center-align">
<h3>Eraltek Kurumsal</h3>
<h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
</div>
</li>
<li>
<a href="panoramic/panoramic.html">
<img src="images/slider/slide_2.jpg">
<div class="caption right-align">
<h3>Eraltek Mağaza</h3>
<h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
</div>
</a>
</li>
<li>
<img src="images/slider/slide_3.jpg">
</li>
<li>
<img src="images/slider/slide_4.jpg">
</li>
<li>
<img src="images/slider/slide_5.jpg">
</li>
</ul>
</div>回答 3
Stack Overflow用户
发布于 2015-08-20 12:39:21
尝试在css文件中定义
.slider .slides li img {
background-size:100% auto;
background-repeat: no-repeat;
}Stack Overflow用户
发布于 2016-04-30 18:22:35
使用带有img标签的img响应类。(您正在使用响应img，它是一个引导类。它在物化设计中不起作用)
$(document).ready(function () {
$('.slider').slider({full_width: true});
}); <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Stack Overflow用户
发布于 2018-10-15 23:27:31
试一试
.slider li img{max-width:100%;height:auto;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30802432
复制相关文章
相似问题