问题描述
我知道这个问题已经被问过很多次了,但没有一个能解决我的问题。 我有一个光滑的滑块(使用 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 网站给出的示例:
解决方法
您可以创建新的 CSS 类规则,如:
.multiple-items img{
height:100vw;
max-height:100vw !important;
width:auto;
}