CSS - Logo image stretched out of position only in Firefox - css

Question

I have a particle-slider effect for a logo on a site which transitions to a flat logo image file for screen sizes less than 960px. It works fine on Safari and chrome but on Firefox the image stretches out of shape.
Safari/Chrome
Firefox
Do I need to add some specific code for Firefox to make this work?
Here's how I have the code at the moment -
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%;
}
}
/* ----------------------------------------- */
particle-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 -->
This has only appeared as an issue after I loaded the front-end files onto a Wordpress CMS (I'm using a HTML5 Blank Child theme), they worked fine as a stand-alone front-end site. How do I fix this?

Answer 1

Try is removing the height: 30% style from the img. I am guessing you want the image to retain its aspect ratio so height: auto might work better?