Keeping a responsive image from scaling larger than it's fixed size

Beginners
1

I sometimes get a little tripped up by the combinations of properties/classes, clashing with each other.

If I have a fixed size canvas item inside a responsive Bootstrap column, which is inside a row, which is inside a container, how do I keep the canvas from getting larger than its intended (fixed) size?

Currently, the canvas scales up larger than it should be, as the column scales up.

    <div class="container">
        <div class="row">
            <canvas id="canvas" width="570" height="350" class="col-10 offset-2"></canvas>
        </div>
    </div>

I want the canvas to still scale DOWN as the screen size (and column) shrink, but not to scale higher than the 570x350 pixel size.

2

The canvas width and height attributes are different than the CSS style height and width. You can prevent the canvas element from getting larger by setting a max-height and/or max-width in the styling. I don’t think that the drawing size (set by the width and height attributes) will keep scaling after the max-width is hit.
Bob

3

Ya, that’s what I had tried, but it doesn’t seem to work. I’m getting all kinds of unexpected results.

Like I said, I sometimes get tripped up on the various combinations of properties… like whether to set size on the div/containing element, or the item inside it… or whether to put centering on the div/containing element, or the item inside it, etc…

With this current test, all I have is the canvas in a responsive column, which is in a row, which is in a container. The image (canvas in this case) is supposed to scale down with the screen, but not go higher than 570x350… but over here, currently, the canvas image itself is definitely scaling bigger than 570x350, despite putting both height/width and max-height/width properties in it.

I’m trying to give Canvas a fair try, but it’s just been a pain so far, compared to my ‘old school’ methods.

Max-width/height affects the containing element, but not the content. The content just scales regardless, and reacts based on the overflow property.

4

This is just getting worse, the more I tinker…

Here’s the base code:

    <div class="container">
        <div class="row">
            <div class="col">
                <canvas id="canvas" style="height: 350px; width: 570px; max-height: 350px; max-width: 270px"></canvas>
            </div>                 
        </div>
    </div>

I’ve removed all the properties that I’ve been trying, except for the h/w and max-h/w, as I’m assuming that they are correct (…although I’m really not sure, honestly).

I’ve done several responsive sites before, but this simple little test/demo is just fighting me, and I have no idea what the issues are. I suspect that I may be putting in tags that are either misplaced, unnecessary, or conflicting somehow… or that I’m missing something. Either way, what I have been trying isn’t working, so that’s why I’m just presenting the ‘empty’ structure, so we can start clean.

Anyone here want to point out what needs to be added for the canvas to:

  • Be displayed in the (horizontal) center of the screen
  • Scale down with the screen (Responsive)
  • Not scale higher than it’s native size (570x350)
  • Display the entire canvas (for some reason, it’s just showing the top left corner of a very enlarged version of the canvas)

I’m still really unclear on how to do a responsive Canvas animation, as there still seems to be conflicts with the size properties vs the display on the screen.

5

I would have to see your code to be much more help. Here is a code pen that makes it seem like it works, but again, I’m making a lot of guesses about your code.

Bob

1 Like
6

That’s pretty much the code… aside from a bunch of background colours (for debugging purposes) and all the combinations of properties that I threw in/removed, trying to get it to work.

Okay, I got it working now. I THINK the issue was (at least partially) that I had a max-height attribute in there. If that’s what the issue was, I’m surprised at the chaos it created, as my canvas was stretched huge (and I was only seeing the top left corner), and it appeared I would not be able to use hard-coded values for the drawImage() size properties! (Which would have been disasterous, and completely killing the whole reason I’m trying to do this via Canvas rather than just a regular image with smaller images put on top using relative positioning.

No idea… But, the current version works (in all respects). So, thanks for nudging me in the right direction! I was dangerously close to abandoning Canvas right there!

7

I simply use
max-width:100%;
height:auto;

8

Hi, scottw. Ya, I originally thought all that did was make the image always stretch to the size (width) of the containing element… but not prevent the image itself from going beyond it’s natural size.

But, for whatever reason, it seems to be working, I think. Nothing appears to be stretching larger than it’s neutral size.