Carousel Bootstrap: Change Size

I'm trying to add my 700x400 images to the bootstrap carousel. And I wanted the carousel to have exactly those dimensions too. However, when I try to do this, the image decreases to 280 x 400, as in the image below, and the carousel goes to 700 x 400 as desired.

MyHTML:

<sectionid="sliderhome">
    <div id="meuSlider" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-1.png" alt="Imagem 1">
                </div>
            </div>
            <div class="item">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-2.png" alt="Imagem 2">
                </div>
            </div>
            <div class="item">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-3.png" alt="Imagem 3">
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#meuSlider" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#meuSlider" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</section>

My CSS:

@media(min-width: 1024px) {
    .div-img-carousel, .item.active {
        overflow: hidden;
        width: 700px;
        height: 400px;
        margin: 0 auto;
    }

    .carousel-inner {
        width: 40%;
    }

    #meuSlider {
        width: 700px;
        height: 400px;
    }

}

How do I leave the carousel size image?

Thank you!