Question

我对网站上的徽标有一个粒子滑块效果，该网站会转换为平面徽标图片文件，屏幕尺寸小于960像素。它适用于Safari和Chrome，但在Firefox上，图像会变形。

Safari /铬

火狐

我是否需要为Firefox添加一些特定代码才能使其正常工作？

以下是我目前的代码 -

的style.css

/* RWD for logo */

@media screen and (max-width: 960px) {


    #particle-slider {
        display: none;
    }   

}


@media screen and (min-width: 960px) {

     #logo img {

        display: none;
    } 

}


@media screen and (min-width: 320px) and (max-width: 960px) {

                #logo {

                    height: auto;

                }

                  #logo img {

                    width: 70%;
                    height: 30%;
                    position: relative;
                    top: 50px;
                    padding-bottom: 50px;
                    left: 15%;

                  }


}

/* ----------------------------------------- */

颗粒slider.php

<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->

    <div id="particle-slider">
        <div class="slides">
            <div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
        </div>
        <canvas class="draw" style="width: 100%; height: 100%;"></canvas>
     </div>
     <script type="text/javascript">
        var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
    </script>
  <div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>

  <!-- particle-slider template -->

在将前端文件加载到Wordpress CMS（我使用的是HTML5 Blank Child主题）之后，这只是一个问题，它们作为一个独立的前端站点运行良好。我该如何解决这个问题？

Answer 1

尝试从height: 30%删除img样式。我猜您希望图像保持其宽高比，以便height: auto可能更好用吗？

CSS - 徽标图像仅在Firefox中伸出位置

1 个答案: