CODEWITHSUNDEEP
htmlimagecssresizeresponsive-design
Lucy Weatherford
Lucy Weatherford

Reputation: 5544

Different images - resizing, scaling in a responsive web app - to fit varying screen sizes

I have an image that is of changing sizes (calls a different image from database on every different view).

I want to display the image in a responsive web application. Like so - in a smartphone device I want it to fit the size of the screen - but be a bit smaller (so that, say, 30% of the text underneath will be visible, and the image will take up around 70% of the screen).

I have already built the application and the image is there, I just want to make sure different image sizes will each react well to various browsers. Mobile and not.

How do I scale the image (any image that shows up) so that whatever image is called, and whatever device is used, the image will fit the screen size at around 70% of the screen in the small device, and in a desktop or tablet view the image will be in its normal size (that is, assuming that it is not huge and too high a resolution - in that case I would want it to be scaled down in the other views as well).

How should I go about this?

Do I need to use ImageMagick, picturefill, css, javascript (jquery? coffeescript? bootstrap) or can I use plain html5? anything advanced? canvas?

Upvotes: 1

Views: 6500

Answers (2)

dsgriffin
dsgriffin

Reputation: 68616

You should look into using CSS3 Media Queries.

You could target smartphones using a query similar to below, where you would define the image in question to be a different size depending on the device size your website is being viewed in, e.g.

@media screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  #myImg { 
    width:70%;
  }
}

Then, in your CSS file for your regular website, you could then simply leave the image at full size (as I'm assuming you have already done).

It's generally better to put your Media Query CSS into an external stylesheet itself too, so your <head> could include something like the following:

<link rel="stylesheet" type="text/css" href="desktopStyle.css">
<link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)" href="smartphoneStyle.css">

Upvotes: 2

Chris Jaynes
Chris Jaynes

Reputation: 2907

I have used picturefill, and it's pretty cool.

If you need more fine-grained control over your classnames, or need load events for your images, you can also try my jquery-pikshur plugin.

Upvotes: 0

Related Questions