How to change size of image based on screen size?

Question

I want a banner to be displayed over 50% of the width of a large screen (desktop) and 100% of the width on a small screen (iphone).

At the moment the image is displayed over 50% of the screen for every device:

.advert-img {
    width: 50%;
    height:auto
}

How can I vary the width based on screen size?

Is this possible with all browsers? i.e. old blackberry browser

With phones now having high pixel counts you should be careful using the media tags. You may want to try using js to detect mobile user agent like here http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser — GleasonK, Jul 02 '14 at 14:15

score 4 · Answer 1 · answered Jul 02 '14 at 14:13

4

You need media queries to accomplish this. In your case, the css would look like this:

.advert-img {
  width: 50%
  height: auto;
}
@media screen and (max-width: 480px) {
  .advert-img {
    width: 100%;
  }
}

You can replace 480px with whatever works best for your content in terms of a mobile breakpoint

answered Jul 02 '14 at 14:13

Jnatalzia

1,687
8
14

Related media query: Orientation. Depending on what you're building, a combination of max-width/max-height and orientation can help effectively display information on desktop, mobile, and tablets. – Curlystraw Jul 02 '14 at 14:17

score 0 · Answer 2 · answered Jul 02 '14 at 14:15

You can use CSS Media Queries to differentiate the width of the device.. Let's say you want to differentiate a mobile with 480 width and a desktop with 1024 width, you can do something like code below:

.advert-img {
    width: 50%;
    height:auto
}
@media only screen and (max-device-width: 480px) {
    width: 100%;
}

For more info check out this link

score 0 · Answer 3 · answered Jul 02 '14 at 14:15

Put this media query in your CSS:

@media ( max-width: 1024 ) {
  /* Code here works for mobiles and tablets. */
  .advert-img { width: 100%; }
}

This will work on all relevant browsers. It will work on Blackberry 4.7.1 and onwards. Check this for Blackberry: http://docs.blackberry.com/en/developers/deliverables/11844/BB_Browser_content_support_by_version_438586_11.jsp .

score 0 · Answer 4 · edited Aug 24 '14 at 06:33

0

I think what you want to achieve can be done by using Media Queries for CSS3 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

edited Aug 24 '14 at 06:33

marc_s

732,580
175
1,330
1,459

answered Jul 02 '14 at 14:16

Junrill Galvez

21
2
4

How to change size of image based on screen size?

4 Answers4