Solution 1 :

Try to add a container-fluid class in the parent div of the image.

Exp: Bootstrap 4

<div class= "container.fluid">
    <img src="(your image)">
</div>

Exp: CSS3

<div style="margin:auto;height:auto;width:100%;">
    <img src="(your image)">
</div>

Problem :

<section class="wt-section hero-large position-relative overflow-hidden mt-md-2">
    <div class="hero-img bg-overlay" data-overlay="0" style="background-image: url(images/officeemp.jpg); height: 100%; width: 100%; object-fit: scale-down"; data-aos="fade-right" data-aos-easing="linear" data-aos-delay="50"></div>
    <div class="container">
        <div class="row align-items-center my-5">
            <div class="col-md-6 py-5" data-aos="fade-left" data-aos-easing="linear" data-aos-delay="100" style="margin-top: 300px">
                <!-- heading -->
                <h1 class="text-uppercase mb-3 display-4 font-weight-bolder">
          Best Business Services
        </h1>
                <p class="lead text-dark">Lets Grow Your Business Togather</p>
                <div class=" mb-0">
                    <a href="contact.html" class="btn btn-pill btn-primary mr-3 mb-md-0 mb-3">
            Quick Call
          </a>
                </div>
            </div>
        </div>
    </div>
</section>

enter image description here

Comments

Comment posted by A1Gard

What’s the problem exactly? , witch image in witch screen size has problem?

Comment posted by Tushar Rao

The image which is showing on the screen is perfect for desktop view but when we want to see it on the mobile view its dimension changes its zoom in automatically.

By