如何在引导程序或 css 中修复所有屏幕尺寸的图像？答案

【问题标题】：how to fix image for all scree sizes in bootstrap or css?如何在引导程序或 css 中修复所有屏幕尺寸的图像？
【发布时间】：2020-06-13 04:33:26
【问题描述】：

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

【问题讨论】：

到底是什么问题？，女巫屏幕大小的女巫图像有问题？
屏幕上显示的图像非常适合桌面视图，但是当我们想在移动视图上看到它时，它的尺寸会自动改变放大。

标签： html css web bootstrap-4 frontend

【解决方案1】：

尝试在图片的父div中添加一个container-fluid类。

Exp：引导程序 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>

【讨论】：