** [已解决] **在移动设备上运行网站时图像尺寸混乱 [英] **[Solved]** Image size messed up when running website on a mobile device

问题描述

[已解决] ，所以我有一张要显示在某些文字后面的图片.当我在桌面浏览器上打开网站时，它可以正常工作.即使从控制台进入移动模式也不会显示任何问题.但是，在部署网站之后，当我在实际的移动设备上打开网站时，图像就会拉长.

我尝试自动设置宽度和高度，并允许最大宽度为100％，但以其他方式弄乱了图像.

这是它在桌面上显示的方式 https://i.stack.imgur.com/9yyta.png .这就是在Chrome控制台 https://i.stack.imgur.com在手机模式下显示的方式/kORcg.png 但这是它在实际移动设备上显示的方式

CSS

  .footerWithImage {背景:url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");背景附件:固定；背景尺寸:封面；背景重复:不重复；背景位置:居中20％；} 

注意:已解决.

这是解决问题的方法:

  @media only屏幕和(最大设备宽度:1366px){.footerWithImage {背景附件:滚动；}} 

解决方案

您将需要使用媒体查询来定位该图像，以指定您想要在移动设备上显示的尺寸.

[Solved] So I have an image that I want to display behind some text. It works fine when I open the website on my desktop browser. Even going into mobile mode from console does not show any problems. However, after deploying the website, when I open it on an actual mobile device, the image is stretched out.

I tried making width and height auto and allowing max-width to be 100% but screws up the image in other ways.

This is how it shows on desktop https://i.stack.imgur.com/9yyta.png. This is how it shows on cellphone mode in chrome console https://i.stack.imgur.com/kORcg.png But this is how it shows on an actual mobile device https://i.stack.imgur.com/9ftSy.jpg[https://i.stack.imgur.com/9ftSy.jpg][1]

HTML

<div class="row d-flex text-center justify-content-center pb-4 footerWithImage">
            <div class="row mt-4 d-block text-white col-lg-5">
                <!-- Content -->
                <h6 class="text-uppercase font-weight-bold">Carson Moore Fitness</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <p>Helping clients build muscle, burn fat and improve posture using safe and effective,
                    personalized fitness programs.</p>
            </div>
            <div class="row mt-4 d-block text-white col-lg-5 footerContacts">

                <!-- Links -->
                <h6 class="text-uppercase font-weight-bold">Contact</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <br>
                <a href="https://g.page/sandcastlefitnessclub-24hrs?share"><i class="fas fa-home mr-3"></i>White Rock,
                    Surrey, BC</a><br>
                <a href="mailto:[e-mail]?Subject=Hello%20again" target="_top"><i
                        class="far fa-envelope mr-3"></i>&nbsp;[e-mail]</a><br>
                <a href="tel:[phone]"><i class="fas fa-phone mr-3"></i>[phone]</a>
                <div id="socialMediaLinksDiv">
                </div>
            </div>
        </div>

CSS

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;    
}

Note: It's solved.

Here's what solved it:

@media only screen and (max-device-width: 1366px) { 
   .footerWithImage { 
       background-attachment: scroll; 
   } 
}

解决方案

You are going to need to target that image using media queries to specify the size you want on mobile.

这篇关于** [已解决] **在移动设备上运行网站时图像尺寸混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！