修复手机图像，减少放大问题

Question

我还在学自举，已经走了一段路去创建一个页面，我被困在两件事上，第一件是顶部的手机图片，在我的屏幕上它是好的，它是24“和1600分辨率，但在15”液晶显示手机切成两半，谁能告诉我怎么做？怎么解决这个问题？第二，图像，部分看起来如此放大，那么大，它有什么修复吗？我应该把它放在一个容器里吗？

直播页面：https://babaraliseehar.com/chet/

我已经创建了一个单独的引导页面，但我在响应方面有一个小问题。

<section class="section hero-section position-relative" id="a">
    <div class="container-fluid position-absolute h-100  hero-bg mob-hid">
        <div class="row align-items-stretch h-100">
            <div class="col-md-6 hero-left"> </div>
            <div class="col-md-6 hero-right"> </div>
        </div>
    </div>
    <!-- <div class="col-md-7 p-0 hero-left-img wow fadeInLeft mob-hid" data-wow-delay=".1s">
        <img src="assets/images/front-left2.png" alt="">
    </div> -->
    <div class="col-12 p-0 hero-mob d-none m-block">
        <img src="assets/images/front-left2.png" alt="">
    </div>
    <div class="container">
        <div class="row align-items-stretch">
            <div class="col-md-6 offset-md-7 hero-right-text wow fadeInRight" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">
                <h1>Get better, together.</h1>
                <p>A professional development social network <br> for today's audience: share what you are <br> doing, in the moment, to get better. </p>
                <div id="form_first">
                    <div class="beta-available">
                        <p><strong>Join the list for the next beta release!</strong></p>

                        <form method="post">
                            <div class="form-bx">
                                <input type="email" name="email" class="input-bx input-brd txtEmail" placeholder="Email Address" id="txtEmail_first">
                            </div>
                            <div class="form-bx ">

                                <button type="submit" name="submit" class="btn button-blue btnValidate_first ">
                                    <span class="">Sign Up</span>
                                </button>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

图像是裁剪的，因为您使用了background-size: cover;。如果不希望图像被裁剪，请使用：

background-size: contain;

同样在你的布局中，图像应该在右边。因此，请添加：

background-position-x: right;

也符合你的形象。

此外，如果您希望您的图像裁剪，但您希望右侧始终可见，让它是封面，并使用background-position-x: right;只裁剪左侧。