我知道这个问题已经问过很多次了,但都没有解决我的问题。我有一个滑块(与ACF pro)和我只是希望所有我的图像是相同的高度(这意味着:所有的肖像img有相同的高度(并改变他们的宽度),作为一个景观img)。
这里是我当前的代码:HTML
<section>
<div>
<?php $images = get_field('portfolio_images'); ?>
<?php if( $images ): ?>
<div class="multiple-items">
<?php foreach( $images as $image ): ?>
<img src="<?php echo $image['url']; ?>" />
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<div class="text-container">
<a>test</a>
</div>
</section>
CSS
section {
width: 80%;
height: auto;
}
.slick-slide {
width: 50vw;
height: 50%;
box-sizing: border-box;
}
JS
<script>
jQuery(document).ready(function($){
$('.multiple-items').slick({
variableWidth: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
});
});
</script>
Slick网站给出的例子是:
在此输入图像说明
.multiple-items img{
height:100vw;
max-height:100vw !important;
width:auto;
}