轮播图：修订间差异
来自卡厄思梦境WIKI
小无编辑摘要 |
小无编辑摘要 |
||
| 第1行： | 第1行： | ||
<includeonly> | <includeonly> | ||
<div class="carousel-container" style="width: 100%; height: | <div class="carousel-container" style="width: 100%; height: 230px; position: relative; overflow: hidden; background: #f0f0f0;"> | ||
<div class="carousel-wrapper" style="display: flex; height: 100%; transition: transform 0.5s ease;"> | <div class="carousel-wrapper" style="display: flex; height: 100%; transition: transform 0.5s ease;"> | ||
{{#if:{{{图1|}}}| | {{#if:{{{图1|}}}| | ||
<div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;"> | <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;"> | ||
[[File:{{{图1}}}|center|link={{{图1跳转|}}}]] | <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">[[File:{{{图1}}}|x150px|center|link={{{图1跳转|}}}|class=carousel-image]]</div> | ||
</div> | </div> | ||
}} | }} | ||
{{#if:{{{图2|}}}| | {{#if:{{{图2|}}}| | ||
<div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;"> | <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;"> | ||
[[File:{{{图2}}}|center|link={{{图2跳转|}}}]] | <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">[[File:{{{图2}}}|x150px|center|link={{{图2跳转|}}}|class=carousel-image]]</div> | ||
</div> | </div> | ||
}} | }} | ||
{{#if:{{{图3|}}}| | {{#if:{{{图3|}}}| | ||
<div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;"> | <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;"> | ||
[[File:{{{图3}}}|center|link={{{图3跳转|}}}]] | <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">[[File:{{{图3}}}|x150px|center|link={{{图3跳转|}}}|class=carousel-image]]</div> | ||
</div> | </div> | ||
}} | }} | ||
{{#if:{{{图4|}}}| | {{#if:{{{图4|}}}| | ||
<div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative;"> | <div class="carousel-slide" style="min-width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;"> | ||
[[File:{{{图4}}}|center|link={{{图4跳转|}}}]] | <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">[[File:{{{图4}}}|x150px|center|link={{{图4跳转|}}}|class=carousel-image]]</div> | ||
</div> | </div> | ||
}} | }} | ||
| 第63行： | 第63行： | ||
</div> | </div> | ||
</div> | </div> | ||
{{#css: | |||
.carousel-container .carousel-image { | |||
width: 100% !important; | |||
height: 150px !important; | |||
object-fit: cover !important; | |||
object-position: center !important; | |||
} | |||
}} | |||
</includeonly><noinclude> | </includeonly><noinclude> | ||
{{面包屑|模板}} | {{面包屑|模板}} | ||
