Nivo Slider 上的第一张图像出现失真

Posted 2023-05-07

【中文标题】Nivo Slider 上的第一张图像出现失真

【英文标题】：First image on a Nivo Slider appears distorted

【发布时间】：2016-11-19 00:18:45

【问题描述】：

我的网站上有一个 Nivo 滑块，每次我重新加载滑块上的第一张图像时，它的高度都会被拉伸，不完全知道原因，所以我将最大高度定义为一个固定值，甚至添加了

height: auto !important; to .nivo-main-image

即便如此，我也面临同样的问题，但没有任何解决方案，感谢您的帮助。

【问题讨论】：

我们需要查看代码，所以您可以在此处发布 JFiddle 或您网站的 URL 吗？

auto 不是固定的 - 它会自动调整高度。如果您要添加 !important 到任何东西，请将其添加到最大高度。或者去掉height:auto bit

【参考方案1】：

代码如下：

**

.nivoSlider 
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;

.nivoSlider img 
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;

.nivo-main-image 
    display: block !important;
    position: relative !important; 
    width: 100% !important;
    height:auto !important;

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink 
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    background:white; 
    filter:alpha(opacity=0); 
    opacity:0;

/* The slices and boxes in the Slider */
.nivo-slice 
    display:block;
    position:relative;
    z-index:5;
    height:100%;
    top:0;

.nivo-box 
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;

.nivo-box img  display:block; 
/* Caption styles */
.nivo-caption 
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
/*  -moz-opacity: 0.8;*/
    /*filter:alpha(opacity=8);*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

.nivo-caption p 
    padding:5px;
    margin:0;

.nivo-caption a 
    display:inline !important;

.nivo-html-caption 
    display:none;

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a 
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;

.nivo-prevNav 
    left:0px;
    z-index:100;

.nivo-nextNav 
    right:0px;
    z-index:100;

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav 
    text-align:center;
    padding: 15px 0;

.nivo-controlNav a 
    cursor:pointer;

.nivo-controlNav a.active 
    font-weight:bold;

**