Image scaling

[reekes]

I must have missed something (sorry to bother you with what must be simple questions).

How can I get images to scale down while browsing on smaller screens?

They’re the right size while on a large screen, but when using a phone they’re way too big. I’m assuming there’s a trick to get the smaller screen to use a smaller version of the image or something.

I removed the width & height attributes from the page, and they look fine on the big screen, but I think they’re still too big when viewed on smaller screens. The image in question here is 296×370.

Similarly, my logo at the top of the page is 676×56, and when viewed on a small screen this is too large. While viewing it in landscape mode it’s OK, but I think still too big.

While in portrait mode, it’s getting cropped on both the left and right edges. Again, I’m assuming there’s a trick to solve this.

Topic

[Jason Bobich]

Hello,

Something is off here I think. You honestly shouldn’t have to do anything; images should scale all on their own. Can I see a link to your site? I’m sure there’s some kind of simple answer.

[reekes]

I’m still working on many things, but have a staging site up.

This page has a photo, which looks fine on a desktop but I think it doesn’t scale down enough while on my iPhone. Try it in landscape mode. The text along the left side of the column is too narrow. I’d rather see it as something like 50/50 of text to image in the column.

reekes.net/stage/home

Then look at the logo on an iPhone. While in landscape mode it’s good, but in portrait it’s getting cropped. Note that this logo design is meant to butt against the left edge. I’m still working on that area of the CSS. I’m about to start adjusting the CSS for mobile too. (I asked a related question about this in another thread.)

[Jason Bobich]

If that’s what you want to setup, you’d just give it a max-width of 50% something like this:

<img src="image.jpg" class="alignright" style="max-width:50%" />

Or maybe do it to all aligned right/left images if you want:

.alignright,
.alignleft {
    max-width: 50%;
}

The logo issue is because of this in your custom.css:

#branding #header_content .container { margin: 0 -40px; }

If this is part of your design, maybe when you get down to the mobile viewport, you can just change the margin to 0 for that element.

[reekes]

style="max-width:50%"

Ah – that’s the magic I was looking for 😉

Now that I see how this works, I think a rule of thirds works best. It’s 33% for images.

As for the logo, you pointed out a flaw in what I was doing. Now that I’ve dug into it, I think the right answer is to change the custom.css to this below. This also corrects the issue in the mobile page, and triggers the proper scaling.

#branding #header_content .container {max-width: none; padding: 6px 0px; }

Thanks for the tips, and proving that your framework is awesome.

[Author]

Replies