在轮播中获取适当大小的品牌徽标
Get properly sized brand logos in a carousel
我正在尝试为我正在设计的公司网站在 Own Carousel 中实现不同品牌徽标的自动调整大小。这个想法是让每个标志都具有合理的尺寸。
大多数徽标采用 SVG 格式,可在 https://wetransfer.com/downloads/44eb123d186e30519edc2d025dafd03420200110231646/112373(一周)获取:如您所见,它们的高/宽比范围很广,因此使用固定宽度和强制执行正确的比率使其中一些(CNRS 和 CEA 徽标)过高。
目标(取自a random site):
The goal
我得到了什么:
What I got
我的代码(HTML,然后CSS基于Bootstrap 4,然后是使用owl-carousel的JS片段:
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5">
<h2 class="section-heading">Ils nous ont fait confiance</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col">
<div class="owl-carousel clients-carousel">
<img src="./img/clients/airbus-group.svg" class="client-logo limit-width" />
<img src="./img/clients/safran-group.png" class="client-logo limit-width" />
<img src="./img/clients/cnrs-fr.svg" class="client-logo limit-height" />
<img src="./img/clients/cea-fr.svg" class="client-logo limit-height" />
<img src="./img/clients/bic.svg" class="client-logo limit-width" />
<img src="./img/clients/edf.svg" class="client-logo limit-width" />
<img src="./img/clients/horiba.svg" class="client-logo limit-width" />
<img src="./img/clients/jenoptec-group.svg" class="client-logo limit-width" />
<img src="./img/clients/otis.svg" class="client-logo limit-width" />
<img src="./img/clients/thales.svg" class="client-logo limit-width" />
</div>
</div>
</div>
</div>
</div>
.clients-carousel .owl-stage-outer, .clients-carousel .owl-stage, .clients-carousel .owl-item {
display: flex;
}
.clients-carousel .owl-item {
margin-left: 1rem;
margin-right: 1rem;
}
.clients-carousel .owl-item img.client-logo {
width: 15em;
height: auto;
}
var siteOwlCarousel = function() {
$('.clients-carousel').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 0,
autoplay: true,
smartSpeed: 1000,
nav:false,
dots:false,
autoWidth:true,
responsive: {
// breakpoint from 0 up
0 : {
items: 3
},
// breakpoint from 576 up
576 : {
items: 3
},
// breakpoint from 768 up
768 : {
items: 4,
center: false
},
992 : {
items: 4,
center: false
},
1200 : {
items: 4,
center: false
}
}
});
};
siteOwlCarousel();
有人会有依赖于 Flexbox 的想法吗?
提前致谢!
舒马特
改变.owl-wrapper显示属性和owl-item显示,浮动,垂直对齐属性并设置为 max- width & height 大小。
希望下面的代码片段对您有所帮助。
var siteOwlCarousel = function() {
$('.clients-carousel').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 10,
autoplay: true,
smartSpeed: 1000,
nav: false,
dots: false,
autoWidth: true,
responsive: {
0 : {
items: 2
},
576 : {
items: 3
},
768 : {
items: 4
},
992 : {
items: 4
},
1200 : {
items: 4
}
}
});
};
siteOwlCarousel();
.owl-carousel .owl-wrapper {
display: table!important;
}
.owl-carousel .owl-item {
display: table-cell!important;
float: none!important;
vertical-align: middle!important;
}
.clients-carousel .owl-item .item{
text-align: center!important;
padding: 15px 30px!important;
}
.clients-carousel .owl-item img{
max-width: 180px!important;
max-height: 50px!important;
display: inline-block!important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5">
<h2 class="section-heading">Ils nous ont fait confiance</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col">
<div class="owl-carousel clients-carousel">
<div class="item"><img src="./img/clients/airbus-group.svg"></div>
<div class="item"><img src="./img/clients/safran-group.png"></div>
<div class="item"><img src="./img/clients/cnrs-fr.svg"></div>
<div class="item"><img src="./img/clients/cea-fr.svg"></div>
<div class="item"><img src="./img/clients/bic.svg"></div>
<div class="item"><img src="./img/clients/edf.svg"></div>
<div class="item"><img src="./img/clients/horiba.svg"></div>
<div class="item"><img src="./img/clients/jenoptec-group.svg"></div>
<div class="item"><img src="./img/clients/otis.svg"></div>
<div class="item"><img src="./img/clients/thales.svg"></div>
</div>
</div>
</div>
</div>
</div>
我正在尝试为我正在设计的公司网站在 Own Carousel 中实现不同品牌徽标的自动调整大小。这个想法是让每个标志都具有合理的尺寸。
大多数徽标采用 SVG 格式,可在 https://wetransfer.com/downloads/44eb123d186e30519edc2d025dafd03420200110231646/112373(一周)获取:如您所见,它们的高/宽比范围很广,因此使用固定宽度和强制执行正确的比率使其中一些(CNRS 和 CEA 徽标)过高。
目标(取自a random site): The goal
我得到了什么: What I got
我的代码(HTML,然后CSS基于Bootstrap 4,然后是使用owl-carousel的JS片段:
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5">
<h2 class="section-heading">Ils nous ont fait confiance</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col">
<div class="owl-carousel clients-carousel">
<img src="./img/clients/airbus-group.svg" class="client-logo limit-width" />
<img src="./img/clients/safran-group.png" class="client-logo limit-width" />
<img src="./img/clients/cnrs-fr.svg" class="client-logo limit-height" />
<img src="./img/clients/cea-fr.svg" class="client-logo limit-height" />
<img src="./img/clients/bic.svg" class="client-logo limit-width" />
<img src="./img/clients/edf.svg" class="client-logo limit-width" />
<img src="./img/clients/horiba.svg" class="client-logo limit-width" />
<img src="./img/clients/jenoptec-group.svg" class="client-logo limit-width" />
<img src="./img/clients/otis.svg" class="client-logo limit-width" />
<img src="./img/clients/thales.svg" class="client-logo limit-width" />
</div>
</div>
</div>
</div>
</div>
.clients-carousel .owl-stage-outer, .clients-carousel .owl-stage, .clients-carousel .owl-item {
display: flex;
}
.clients-carousel .owl-item {
margin-left: 1rem;
margin-right: 1rem;
}
.clients-carousel .owl-item img.client-logo {
width: 15em;
height: auto;
}
var siteOwlCarousel = function() {
$('.clients-carousel').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 0,
autoplay: true,
smartSpeed: 1000,
nav:false,
dots:false,
autoWidth:true,
responsive: {
// breakpoint from 0 up
0 : {
items: 3
},
// breakpoint from 576 up
576 : {
items: 3
},
// breakpoint from 768 up
768 : {
items: 4,
center: false
},
992 : {
items: 4,
center: false
},
1200 : {
items: 4,
center: false
}
}
});
};
siteOwlCarousel();
有人会有依赖于 Flexbox 的想法吗?
提前致谢!
舒马特
改变.owl-wrapper显示属性和owl-item显示,浮动,垂直对齐属性并设置为 max- width & height 大小。
希望下面的代码片段对您有所帮助。
var siteOwlCarousel = function() {
$('.clients-carousel').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 10,
autoplay: true,
smartSpeed: 1000,
nav: false,
dots: false,
autoWidth: true,
responsive: {
0 : {
items: 2
},
576 : {
items: 3
},
768 : {
items: 4
},
992 : {
items: 4
},
1200 : {
items: 4
}
}
});
};
siteOwlCarousel();
.owl-carousel .owl-wrapper {
display: table!important;
}
.owl-carousel .owl-item {
display: table-cell!important;
float: none!important;
vertical-align: middle!important;
}
.clients-carousel .owl-item .item{
text-align: center!important;
padding: 15px 30px!important;
}
.clients-carousel .owl-item img{
max-width: 180px!important;
max-height: 50px!important;
display: inline-block!important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5">
<h2 class="section-heading">Ils nous ont fait confiance</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col">
<div class="owl-carousel clients-carousel">
<div class="item"><img src="./img/clients/airbus-group.svg"></div>
<div class="item"><img src="./img/clients/safran-group.png"></div>
<div class="item"><img src="./img/clients/cnrs-fr.svg"></div>
<div class="item"><img src="./img/clients/cea-fr.svg"></div>
<div class="item"><img src="./img/clients/bic.svg"></div>
<div class="item"><img src="./img/clients/edf.svg"></div>
<div class="item"><img src="./img/clients/horiba.svg"></div>
<div class="item"><img src="./img/clients/jenoptec-group.svg"></div>
<div class="item"><img src="./img/clients/otis.svg"></div>
<div class="item"><img src="./img/clients/thales.svg"></div>
</div>
</div>
</div>
</div>
</div>