Question

I have an image and I specify that the height is 500px.
This image is in a division with 960px wide.

The image stretches wide to fill the div. But I’d like it to maintain aspect ratio. giving my vertical images borders on the side.

How can I do this?
Notice in this picture, the person is stretched to for this image box? I want it to show the right ratio, but with a max height of 500px

<div class="banner">
        <div class="slider-wrapper theme-bar">
            <div id="slider" class="nivoSlider">
                <img src="images/gallery/1/1.jpg" alt="1.jpg" />
            </div>
        </div>
</div>


    .nivoSlider {
        position:relative;
        width:100%;
        height:auto;
        overflow: hidden;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        max-height: 600px;
    }
    .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;
    }

I got it, I had to add
.nivo-main-image { height: 600px !important; }
and remove the
width = 100% – Frantumn 12 mins ago

Answer 1

If you don’t specify a width at all, this will happen by default. Somewhere I’m sure you have specified a width on this image, and you need to remove it.