我正在尝试创建一个带有一些图像的响应式轮播。
有两种图像:
1.较小的图像
2.大图像。
我希望较小的图像(无论大小)可以拉伸和填充,而较大的图像则可以调整大小,或者如果不可能,则应裁剪并调整大小的图像按原样填充。
另外,如您所见,我设置了max-height:500px
并不是响应式的好习惯,但是如果我不这样做,那么大图像看上去会比我想要的大。
因此,基本上,我正在寻找某种方式来调整大小并使其适合旋转木马,而与图像的尺寸无关。现在,我可以裁剪较大的图像,但无法拉伸和填充较小的图像。答案对我不起作用。
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox"
style="width:100% !important; height:100% !important; max-height:500px !important;">
<div class="carousel-item active"
style="background-size: cover !important; background-position: 50% 50% !important; min-width: 100% !important; min-height: 100% !important;">
<img class="d-block w-100 h-100"
src="{{ v.url }}">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
对于该问题,我几乎尝试了所有答案,例如background-size: cover
等,对我来说都不起作用。因此,请在标记为重复之前或参考其他答案之前进行一次测试。
我不认为是否需要,但该转盘位于网格的列中。
如果您不使用js
就可以做到这一点,因为我不是前端开发人员,那会很棒,我只想修复它而又不浪费时间。