My image sizing seems to be ignored

[chuck_agari]

I was trying to do a little bit of fancy things with images in CSS, but it wasn't working, so I tried to simplify things. Here is my currect CSS that controls images:

img {
width: 50%;
height: 50%;
}
figure {
border: 2px;
border-color: #f68d39;
}
figure img
{
margin-left: auto;
margin-right: auto;
margin-bottom: 0.25em;
}

But in HTML 5 output, I'm seeing 2 issues:

Images in figure elements are not getting resized at all.

Images not in figure elements are being resized only vertically, that is, they are half as high but still as wide.

I see nothing that Flare added in the output that should be an issue. Here's an example I was using to compare, from the source code of the HTML5 output:

<figure>
<img src="../Resources/Images/enforcement.g-suite.41.png" data-mc-conditions="Agari.Agari Only" />
<figcaption>The Agari-Quarantine folder in Gmail</figcaption>
</figure>
<img src="../Resources/Images/enforcement.g-suite.41.png" data-mc-conditions="Agari.Agari Only" />

[NorthEast]

What are you actually trying to do? How do you want images to behave?

Setting width/height to 50% will make the image use 50% of the available space in its container. That bit is really important - it doesn't mean 50% of the image's original size.

Typically, you'd not set both width and height - for screenshots that are mainly landscape you'd set the width, and height is scaled in proportion.
Additionally, to cater for images which are portrait, you can control the maximum height by using max-height: 100%

I'd very strongly advise not so set a width/height on img, as it applies to all images.
For example, do you really want a 20px wide icon to fill 50% of the available width?
So I'd suggest using an image class for screenshots; e.g. img.screenshot.

[chuck_agari]

What are you actually trying to do? How do you want images to behave?

Setting width/height to 50% will make the image use 50% of the available space in its container. That bit is really important - it doesn't mean 50% of the image's original size.

Typically, you'd not set both width and height - for screenshots that are mainly landscape you'd set the width, and height is scaled in proportion.
Additionally, to cater for images which are portrait, you can control the maximum height by using max-height: 100%

I'd very strongly advise not so set a width/height on img, as it applies to all images.
For example, do you really want a 20px wide icon to fill 50% of the available width?
So I'd suggest using an image class for screenshots; e.g. img.screenshot.

Technically, that's not quite true, although you had me a bit scared there because I've long sized images using percentages.

To be specific, "By default, the property defines the width of the content area." (https://developer.mozilla.org/en-US/docs/Web/CSS/width)

But "The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player." (https://developer.mozilla.org/en-US/doc ... ntent-area)

IOW, the height and width attributes are supposed to be applied to the content area created by the browser for the image, not the the container that the image is placed in.

Because the vast majority if the images I'm using are screen shots, and because I nether want nor need full-size screen shots, simply wanted all images to be half-size unless explicitly directed otherwise.

And how would a class be any different? I'd simply put the same CSS in the class and then I'd have to apply that class to most f my images--but the sizing issue would not change, right?

[NorthEast]

IOW, the height and width attributes are supposed to be applied to the content area created by the browser for the image, not the the container that the image is placed in.

Ok, not sure if you mean something different to what I was saying. Isn't this 'content area' going to occupy the size of its container, rather than the pixel size of the image?

My key point was that the size of this 'content area' is not the original image size - e.g. if your image is 800px wide, the content area width is not 800px.

The content area is going to occupy the full space available for that img tag - so normally that's going to be constrained by a container tag, like a paragraph.

So, say you have <body><p><img .../></p></body>, and no margins/padding on the paragraph. The image content area occupies the full width of the paragraph (and essentially the body).
If you insert a 800px image, and set img width to 50%, it'll constantly vary in width to be 50% of the paragraph (body) width.
Likewise, if you insert a 16px wide image, it'll also constantly vary in width to be 50% of the paragraph (body) width - so your 16px image is now displayed at the same width as the 800px image.

That's why I suggested using an image class for screenshots, because you presumably only want the this scaling to be for your screenshots, and not every single image. You presumably don't want a 16px wide icon to be scaled up to half your screen width, at the same size as the screenshot image.

[chuck_agari]

IOW, the height and width attributes are supposed to be applied to the content area created by the browser for the image, not the the container that the image is placed in.

Ok, not sure if you mean something different to what I was saying. Isn't this 'content area' going to occupy the size of its container, rather than the pixel size of the image?

My key point was that the size of this 'content area' is not the original image size - e.g. if your image is 800px wide, the content area width is not 800px.

The content area is going to occupy the full space available for that img tag - so normally that's going to be constrained by a container tag, like a paragraph.

So, say you have <body><p><img .../></p></body>, and no margins/padding on the paragraph. The image content area occupies the full width of the paragraph (and essentially the body).
If you insert a 800px image, and set img width to 50%, it'll constantly vary in width to be 50% of the paragraph (body) width.
Likewise, if you insert a 16px wide image, it'll also constantly vary in width to be 50% of the paragraph (body) width - so your 16px image is now displayed at the same width as the 800px image.

That's why I suggested using an image class for screenshots, because you presumably only want the this scaling to be for your screenshots, and not every single image. You presumably don't want a 16px wide icon to be scaled up to half your screen width, at the same size as the screenshot image.

Well, I know that if an image tag does not have height and width attributes, then the browser rendering engine doens't "know" how much space to make for the image until it gets the image from the server, which is why we often see layouts adjusting as images and other media are loaded after the doc tree. But once the browser has the image, the rendering engine displays it at it's default size--or it should unless it is told otherwise, either through attributes of the image itself or attributes of any CSS that should be applied to it, right?

For example, I have 2 images, 271 pixels wide be 542 pixels high, side by side. The original has pixel dimensions in the image tag and is rendered full size. The second does not; it has only the CSS which tells it that the width=50%. Guess which one is rendering larger? (Hint: the 2nd one, by a wide margin.)

[NorthEast]

Well, I know that if an image tag does not have height and width attributes, then the browser rendering engine doens't "know" how much space to make for the image until it gets the image from the server, which is why we often see layouts adjusting as images and other media are loaded after the doc tree. But once the browser has the image, the rendering engine displays it at it's default size--or it should unless it is told otherwise, either through attributes of the image itself or attributes of any CSS that should be applied to it, right?

If you don't use any CSS to set the height/width, it'll display the image at its pixel size - a 271x542px image is displayed at that size.

If you start adding CSS for the height or width; anything you set inline on the image tag will take precedence over the stylesheet.

For example, I have 2 images, 271 pixels wide be 542 pixels high, side by side. The original has pixel dimensions in the image tag and is rendered full size. The second does not; it has only the CSS which tells it that the width=50%. Guess which one is rendering larger? (Hint: the 2nd one, by a wide margin.)

If you didn't use any CSS, they'd both be 271x542px.
The first image has a inline size set in pixels, so it'll always be a fixed size. The inline style takes precedence over the 50% width size set in the stylesheet.
The second image is set to 50% width in the stylesheet, so it uses 50% of the space available for the img tag. So it'll constantly vary in size depending on (a) where you insert the image (b) the size of your browser window.

I'm not really sure where this thread is going now - what's the question?