Question

While using Nivo Slider it enlarges my images to about 2x their original size which results in horrible looking pictures. I was wondering if their was a way to fix this. My image sizes are 367 x 246 px.

Here is a screen of what happens:

Here is my HTML with some ERB:

<div class="slider-wrapper up-nivo">
  <div id="slider" class="nivoSlider">
    <%= image_tag "logo.JPG", alt: "" %>
    <%= image_tag "line.JPG", alt: "" %>
    <%= image_tag "game.JPG", alt: "" %>
    <%= image_tag "leaders.JPG", alt: "" %>
    <%= image_tag "crowdFacingJim.JPG", alt: "" %>
    <%= image_tag "band.JPG", alt: "" %>
  </div>
</div>

Then here is my css:

.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !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;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    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;
}
.nivo-nextNav {
    right:0px;
}
/* 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;
}

Here is the css for my theme:

.up-nivo .nivoSlider {
    position:relative;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.up-nivo .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.up-nivo .nivoSlider a {
    border:0;
    display:block;
}

.up-nivo .nivo-controlNav {
    text-align: right;
    padding: 20px 0;
    line-height: 0;
    font-size: 0;
    color: transparent;
    margin-right: 2.5%;
    margin-top: -5%;
}
.up-nivo .nivo-controlNav a {
    display:inline-block;
    width:16px;
    height:16px;
    background:url(bulletFull.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 0 2px;
}
.up-nivo .nivo-controlNav a.active {
    background:url(bulletEmpty.png) no-repeat;
}

.up-nivo .nivo-directionNav a {
    display:block;
    height:80px;
    width:75px;
    text-indent:-9999px;
    border:0;
}
.up-nivo a.nivo-nextNav {
    background:url(arrowRight.png) no-repeat;
    background-position: 50% 50%;
    right:15px;
}
.up-nivo a.nivo-prevNav {
    background:url(arrowLeft.png) no-repeat;
    background-position: 50% 50%;
    left:15px;
}

.up-nivo .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.up-nivo .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.up-nivo .nivo-caption a:hover {
    color:#fff;
}

.up-nivo .nivo-controlNav.nivo-thumbs-enabled {
    width: 100%;
}
.up-nivo .nivo-controlNav.nivo-thumbs-enabled a {
    width: auto;
    height: auto;
    background: none;
    margin-bottom: 5px;
}
.up-nivoault .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    width: 120px;
    height: auto;
}

Here is the js to start nivo:

$(window).load(function() {
    return $("#slider").nivoSlider({
      pauseTime: 10000,
      directionNav: true
    });
  });

Answer 1

Without seeing some of your code it’s hard to say. Just guessing I would recommend you set the width on the container holding the images via css. If that doesn’t work (and it should with newer versions of this plugin) set the width on the images themselves.

---

edit: You have .nivoSlider inside slider-wrapper and up-nivo. Since nivoSlider is set to 100% width it is filling all of its container. Set the width on one of those to whatever you need (367px perhaps more if there are some padding or margins in play).

You should also set the width and height of each of your images… it will help the page render faster.