Can't set the max-width of each image with the NivoSlider

I'm setting up the responsive _NivoSlider_ on my website and would like to display each image using their original sizes, rather than filling the entire wrapper/container.

Currently, my site looks something like this: enter image description here

But, if toystory.jpg is 618 x 246px for example, I would like it to only stretch to that size while keeping its responsiveness when scaling down the browser, looking something like this:

enter image description here

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">
        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>

    </div>
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

CSS:

/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
}
body {
    line-height:1;
    color:black;
    background:white;
}
table {
    border-collapse:separate;
    border-spacing:0;
}
caption, th, td {
    text-align:left;
    font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:"";
}
blockquote, q {
    quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
    display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
    font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
    color:#333;
    background:#eee;
}

a, a:visited {
    color:blue;
    text-decoration:none;
}
a:hover, a:active {
    color:#000;
    text-decoration:none;
}

#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}

.slider-wrapper { 
    width: 80%; 
    margin: 100px auto;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
    clear:both;
}

How would I be able to achieve this, without possibly setting the width and height individually on each image with inline styling, or having the wrapper/container being the element that sizes all my images?

Codeinwp / Nivo-Slider-jQuery

Can't set the max-width of each image with the NivoSlider #352