Why resizing images on webpage sometimes not possible in Design/Edit mode?

HTML & CSS
1

Occasionally I visit a webpage which I want later to printout (to pdf) or as *.png snapshot.
Unfortunately sometimes a big, big images is placed rep. embedded on the webpage.
I want to shrink resp. resp resize it (manually).

Therefore I switch to browser Design mode/Edit mode and try to manually resize it by e.g. dragging the upper elft corner (square).
This works in approx. 80% of all cases.

However sometimes this resize doesn’t work.

When I try it then the images rectangle size switches automatically back to its original size.

I guess it has something to do with the CSS specification for the tag.
The corresponding CSS rules look like:

img {
  break-inside: avoid;
  display: inline-block;
  height: auto;
  max-width: 100%;
  page-break-inside: avoid;
  width: 100%;
  margin-left: 20px !important;
  box-sizing: border-box;
}

Whats the critical CSS value and how do I have to change it to make the embedded image resizable?

2

It sounds like you’re running into an issue with CSS constraints when trying to resize images in Design/Edit mode. The key CSS properties in your case seem to be max-width: 100%; and width: 100%;. These properties are forcing the image to fit within its container, preventing you from resizing it manually. To make the image resizable, try adjusting these values—changing them to something like width: auto; might give you the flexibility you need. Also, keep an eye on box-sizing: border-box;, as it can affect how the image dimensions are calculated.

Have you tried tweaking these properties yet?