Как сверстать слайдер в котором картинки разной ширины?

Andrew,

<ul id="slider">
        <li class="slide active">
            <img src="../alfa.png" alt="">
        </li>
        <li class="slide active">
            <img src="../audi.png" alt="">
        </li>
        <li class="slide active">
            <img src="../bmw.png" alt="">
        </li>
        <li class="slide active">
            <img src="../chery.png" alt="">
        </li>
        <li class="slide active">
            <img src="../chevrolet.png" alt="">
        </li>
        <li class="slide active">
            <img src="../citroen.png" alt="">
        </li>
        <li class="slide active">
            <img src="../dacia.png" alt="">
        </li>
        <li class="slide active">
            <img src="../daewoo.png" alt="">
        </li>
        <li class="slide active">
            <img src="../dodge.png" alt="">
        </li>
        <li class="slide active">
            <img src="../fiat.png" alt="">
        </li>
    </ul>

body{
    background: grey;
}

#slider{
    width: 90%;
    margin: 0 auto;
    top: 100px;
    height: 200px;
    background: grey;
    list-style-type: none;
}
.slide{
    display:inline-block;
    width: 100%;
}
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    cursor: pointer;
    margin: 0 auto;
    padding-top: 40px;
    transform: scale(0.8);
}
img:hover{
    filter: grayscale(0%);
}

$('#slider').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 7,
    slidesToScroll: 1,
    variableWidth: true
});

Как сверстать слайдер в котором картинки разной ширины?

Ankhena, уважаемый, о какой высоте вы говорите? Речь идёт, о ширине =)