how to avoid squeesing and maintain aspect ratio of images in small devices like tablets and mobile
<p>I am using a banner for my website for mobiles and tablets. The size of banner is 278*386. The banner is getting squeezed on tablets and mobile. I am using the banner as <code>background-image</code> property of a Div.
here is my css for the div.</p>

<p><strong>For tablets:</strong></p>

<pre><code>@media (max-width: 767px) and (min-width: 480px){
.masthead {
color: #fff;
margin-bottom: 40px;
font-size: 18px;
line-height: 30px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
background-image: url('https://website.com/banner_mobile_11.jpg');
height: 475px;
position: relative;
top: 105px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
}
</code></pre>

<p>}
If I use  <code>background-size: contain;</code> it doesn't cover whole width of screen and leave space but I want full width banner, if I use  <code>background-size: Cover;</code> it gets stretched. same is the issue for mobile.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="parenthead"&gt;
&lt;div class="masthead"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="span6"&gt;
&lt;h1&gt;Connect with us!&lt;/h1&gt;
&lt;p&gt;iFixandRepair helps get your mobile device back up and running again,     servicing screen replacement, speaker repair, &amp; more on phones, tablets, &amp; computers.&lt;/p&gt;
&lt;div class="social_button"&gt;
&lt;a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" class="btn btn-primary btn-large" target="_blank" onclick="track_event('External Link', 'Facebook Home')"&gt;
&lt;i class="icon-facebook"&gt;&lt;/i&gt; Facebook
&lt;/a&gt;
&lt;a href="http://www.twitter.com/iFixandRepairW" class="btn btn-info btn-large" target="_blank" onclick="track_event('External Link', 'Twitter Home')"&gt;
&lt;i class="icon-twitter"&gt;&lt;/i&gt; Twitter
&lt;/a&gt;
&lt;a href="tel:+5619078349" class="btn btn-call btn-large"&gt;
&lt;i class="icon-phone"&gt;&lt;/i&gt; Call Us&lt;/a&gt;
&lt;/a&gt;
&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p><strong>Banner:</strong></p>

<p><a href="https://i.stack.imgur.com/3VJ7u.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3VJ7u.jpg" alt="enter image description here"></a></p>