I have an image that's displayed as 640 x 480 pixels. I need to
transition a scale of the image.

The "bounding box" of the image is to always remain at 640 x 480. ie any overflow is hidden.

I can't wrap the image in a DIV so to keep the bounding box the same I'm
using clip-path. This is CSS so far

transition: transform 10s linear, clip-path 10s linear;
transform: scale(2);
clip-path: inset(25%);

It works mostly fine except that for a few seconds during the transition
the bounding box gets about 20 pixels bigger before finishing at the
correct size.

Is there a way I can scale the image but keep the bounding box exactly
the same size (without a containing DIV)?

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On Tue, 19 May 2020 09:11:23 +1000, Andrew Poulos wrote:

It works mostly fine except that for a few seconds during the transition
the bounding box gets about 20 pixels bigger before finishing at the
correct size.

Sounds to me like that's your browser's rendering, rather than a
problem in CSS or HTML. Have you tried it in a different browser?

--
Stan Brown, Tehachapi, California, USA
https://BrownMath.com/
https://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In Message: <ld2dnVzx2syDi17DnZ2dnUU7-TvNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

I have an image that's displayed as 640 x 480 pixels. I need to
transition a scale of the image.

The "bounding box" of the image is to always remain at 640 x 480. ie
any overflow is hidden.

I can't wrap the image in a DIV so to keep the bounding box the same
I'm using clip-path. This is CSS so far

transition: transform 10s linear, clip-path 10s linear;
transform: scale(2);
clip-path: inset(25%);

It works mostly fine except that for a few seconds during the
transition the bounding box gets about 20 pixels bigger before
finishing at the correct size.

Is there a way I can scale the image but keep the bounding box
exactly the same size (without a containing DIV)?

Perhaps, something similar, I suppose that would depend on any other restrictions.

transition a background image comes to mind, that would not
necessarily need to be an img element, but could be with a blank gif
as the image.

https://codepen.io/noneyainvalid/full/BaovNwP

--
James Kirk

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 20/05/2020 2:08 am, James Kirk wrote:

In Message: <ld2dnVzx2syDi17DnZ2dnUU7-TvNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

I have an image that's displayed as 640 x 480 pixels. I need to
transition a scale of the image.

The "bounding box" of the image is to always remain at 640 x 480. ie
any overflow is hidden.

I can't wrap the image in a DIV so to keep the bounding box the same
I'm using clip-path. This is CSS so far

transition: transform 10s linear, clip-path 10s linear;
transform: scale(2);
clip-path: inset(25%);

It works mostly fine except that for a few seconds during the
transition the bounding box gets about 20 pixels bigger before
finishing at the correct size.

Is there a way I can scale the image but keep the bounding box
exactly the same size (without a containing DIV)?

Perhaps, something similar, I suppose that would depend on any other restrictions.

transition a background image comes to mind, that would not
necessarily need to be an img element, but could be with a blank gif
as the image.

https://codepen.io/noneyainvalid/full/BaovNwP

Thanks but it would be better in this case if I could just edit the CSS
as there's lots of code that's expecting an img :-(

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 19/05/2020 8:26 pm, Stan Brown wrote:

On Tue, 19 May 2020 09:11:23 +1000, Andrew Poulos wrote:

It works mostly fine except that for a few seconds during the transition
the bounding box gets about 20 pixels bigger before finishing at the
correct size.

Sounds to me like that's your browser's rendering, rather than a
problem in CSS or HTML. Have you tried it in a different browser?

It happens in Chrome and Firefox.

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)