Responsive Banner is zooming

I'm using a site that has admin panel to add banner , pages etc. When I add the banner , it always "eats" a piece of the image, it is as if it is giving zoom . In the mobile part it gets even worse.

How can I make this banner be of a specific size without giving zoom ?

CSS:

**
 * ---------------------------------------------------
 * Bx Slider Style
 * ---------------------------------------------------
 */

.main-slider {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 99;
}

.slider ul li {
    width: 100%;
    height: 530px;
    display: table;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center;
}

.slider ul li .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333333;
    opacity: 0.2;
    filter: alpha(opacity=20);
    z-index: 99;
}

.slider ul li .content {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    text-align: center;
    z-index: 999;   
}

.slider ul li .inner {
    width: calc(100% - 130px);
    margin: 0 auto;
}

.slider ul li .text {
    width: auto;
    display: inline-block;
    background: rgba(0,0,0,0.3);
    padding: 25px;
    border-radius: 10px;
}

.slider h2 {
    color: #fff;
    text-transform: none;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 20px;
    margin-top: 0;
}

.slider h3 {
    color: #fff;
    text-transform: none;
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 20px;
    display: inline-block;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.slider p {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
}

.slider p.button {
    overflow: hidden;
    margin-top: 20px;
}

.slider p.button a {
    font-size: 14px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    background: #1AABDD;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.slider p.button a:hover {
    background: #656464;
}

.bx-wrapper .bx-viewport {
    left: 0;
    border: 0 !important;
    box-shadow: none !important;
}

HTML:

<!-- Slider Start -->
<section class="main-slider">
    <div class="slider">
        <ul class="bxslider">

            <?php
            $statement = $pdo->prepare("SELECT * FROM tbl_slider WHERE status=? ORDER BY id DESC");
            $statement->execute(array('Active'));
            $result = $statement->fetchAll(PDO::FETCH_ASSOC);                           
            foreach ($result as $row) 
            {
                if($row['position']=='Left') {$align='tal';}
                if($row['position']=='Center') {$align='tac';}
                if($row['position']=='Right') {$align='tar';}
                ?>
                <li style="background-image:url(<?php echo BASE_URL; ?>assets/uploads/<?php echo $row['photo']; ?>);">
                    <div class="overlay"></div>
                    <div class="content">
                        <div class="inner <?php echo $align; ?>">
                            <div class="text">

                                <?php if($row['heading']!=''): ?>
                                <h2>
                                    <?php echo $row['heading']; ?>
                                </h2>
                                <?php endif; ?>

                                <?php if($row['subheading']!=''): ?>
                                <h3>
                                    <?php echo $row['subheading']; ?>
                                </h3>
                                <?php endif; ?>

                                <?php if($row['content']!=''): ?>
                                <p>
                                    <?php echo nl2br($row['content']); ?>
                                </p>
                                <?php endif; ?>

                                <?php if($row['button_text']!=''): ?>
                                <p class="button">
                                    <a href="<?php echo $row['button_url']; ?>" class="btn btn-flat"><?php echo $row['button_text']; ?></a>
                                </p>
                                <?php endif; ?>

                            </div>
                        </div>
                    </div>
                </li>
                <?php
            }
            ?>          
        </ul>
    </div>
</section>
<!-- Slider End -->