how to avoid squeesing and maintain aspect ratio of images in small devices like tablets and mobile

Question

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 background-image property of a Div. here is my css for the div.

For tablets:

@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;
}

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

HTML:

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

Banner:

syntax should be @media (max-width: 767px) and (min-width: 480px) { .class{ .... } } — williamli, Jan 08 '16 at 06:26
just want to point out one more thing, since you have @media (max-width: 767px) and (min-width: 480px), it means that the background image only shows up for screens between 767px and 480px. — williamli, Jan 08 '16 at 06:28
@williamli off course i know about it. i am asking about how can i avoid image stretching in this screen size? — Ammar Ul Hassan, Jan 08 '16 at 06:29
@AmmarUlHassan how do you expect it to not "stretch"? Do you expect its width to be always covering the width of the your banner div? — williamli, Jan 08 '16 at 06:45
http://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch — Lalji Tadhani, Jan 08 '16 at 07:12
@AmmarUlHassan see method two in my updated answer. i used and css position to slide your img under your text instead of using backgrounds. — williamli, Jan 08 '16 at 09:11

score 1 · Accepted Answer · edited Jan 15 '16 at 12:56

1

[additional info after chatting with OP]

There is 2 ways to have a resizing banner that keeps the same aspect ratio (in proportion).

Method one is using background-size:cover. it will crop the extra height / width and make your banner fit. In http://codepen.io/williamli/pen/MKmjxE we use

background-size: cover;

Method two is let the height (in this case) expands when width increases. In the following codepen, still based on your code, a normal <img> is used to achieve this. Positioning css is used to 'slide' your banner under text. http://codepen.io/williamli/pen/wMdovW. e.g.:

z-index:1;

[original answer]

background-size: cover should work. It doesn't stretch, it should make your background image covering the whole div at the same aspect ratio by cropping out some extra parts.

By using a responsive div (using media queries), and background-size: cover, this is how most people handle responsive banners in the web today.

Example: I was working on this page the other day for the front page of http://venna.co. Check it out, it has a responsive banner at the front and it changes size when your viewport size changes.

See this codepen using

background-size: cover;

The girls's head is in proportion when screen size changes.

edited Jan 15 '16 at 12:56

Mr Lister

45,515
15
108
150

answered Jan 08 '16 at 06:02

williamli

3,846
1
18
30

but using cover as background size its not maintaining aspect ratio P.S its cropping main parts of my image. Is the banner size my main problem as its too small and when it will open on large screen with more width it will get stretched? – Ammar Ul Hassan Jan 08 '16 at 06:05
Fact: background-size: cover do not stretch things out of proportion. It, by definition, make your background covers the full width of its container and crop the extra bits. Do you have HTML code? – williamli Jan 08 '16 at 06:24
@AmmarUlHassan checkout http://codepen.io/williamli/pen/MKmjxE for example (screen need to be between 767 and 480) – williamli Jan 08 '16 at 06:29
@AmmarUlHassan Updated answer to include codepen and screenshots. The banner resizes (not sure if that's your definition of stretch). But is cropped at the bottom to ensure the photo content is in proportion. – williamli Jan 08 '16 at 06:36
@AmmarUlHassan can you define what you mean by "stretch"? Can you also show us the banner that you are trying to set? Some screen shot of what is you / the banner you used would be nice. – williamli Jan 08 '16 at 06:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100117/discussion-between-ammar-ul-hassan-and-williamli). – Ammar Ul Hassan Jan 08 '16 at 06:38
please review my banner in question i have just updated – Ammar Ul Hassan Jan 08 '16 at 06:44

score 0 · Answer 2 · edited Jan 08 '16 at 06:06

0

You can use background-size property with fix 'px' value per breakpoints.

@media (max-width: 767px) and (min-width: 480px) {
    .masthead {
        background-size: 500px;
    }
}

@media (max-width: 567px) and (min-width: 280px) {
    .masthead {
        background-size: 300px;
    }
 }

background-size: auto|length|cover|contain|initial|inherit;

edited Jan 08 '16 at 06:06

Mi-Creativity

9,554
10
38
47

answered Jan 08 '16 at 06:06

Vincent Panugaling

896
1
12
28

its still stretching if i give it custom background-size for tablet screens – Ammar Ul Hassan Jan 08 '16 at 06:10
would you post your html markup? or create a fiddle on that? – Vincent Panugaling Jan 08 '16 at 06:12
Please review my html – Ammar Ul Hassan Jan 08 '16 at 06:20

how to avoid squeesing and maintain aspect ratio of images in small devices like tablets and mobile

2 Answers2