Responsive banner this with zoom

Question

I’m using a website that has administrative panel to add banner, etc. When I add banner, he always "eats" a piece of the picture, it’s like he’s giving zoom. In the "part mobile" gets even worse.

How do I do that banner stay of a specific size without giving zoom none?

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 -->

Answer 1

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

Change the property background-size:cover for background-size:contain.

The estate COVER adjusts the image as widely as possible and maintains its ratio (the image is not stretched). The image "covers" the entire container, both in height and width. When the image and container have different dimensions, the image crosses the boundaries of the container in any direction, to continue maintaining the ratio. This is what is happening with your banner, IE, the size of your banner is not suitable for the site.

The estate CONTAIN increases the image as much as possible while maintaining its proportion (the image is not stretched). The image tries to occupy the entire space of the container. When the image and container have different dimensions, the unfilled areas (either top/bottom or left/right) are filled with the background color.