Always keep images inside the boundary/border of the Image block.

[paaljoachim]

What problem does this address?

At the moment we have multiple problems with using the Image dimensions and the handlebars in an Image block.

I will list the issues further below.

What is your proposed solution?

1. Image should not be able go outside the boundary box.
   

Max size:
Image dimensions: should relate to the boundary box and not the image itself. Reset button should reset back to original image size (fill the boundary box with the image?)
Drag handles: One should not be able to drag larger than the border of the boundary box.

Here is a suggestion by @sarahmonster
Image block: consolidate + simplify size controls
#8397

I am wondering if the boundary box should be resized along with the image? Having a max size for the boundary box. Always keeping the caption in the center of the boundary box.

Various associated bug Issues:

Not able to reset image to original size after using handlebars. (Issue closed)
#8968

Image Block rendered image in the editor doesn't match the rendered image on the frontend
#24970

Image with size breaks out of editor block
#12168

Setting image to > 75% width makes it break out of block boundary & causes horizontal scrolling
#17795

Image Block: Inconsistent image resizing (also affects image height)
#17685

Image block can be resized to be larger than viewport (Issue closed)
#26715

Image Block: Changing alignment removes image resizing
#23288

[Azragh]

This worked very well so far:

.wp-block-image.is-resized {
  max-width: 100%;
  .components-resizable-box__container {
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    img {
      height: auto;
    }
  }
}

Also fixed the issue of oversized images in mobile previews. Only downside is that the horizontal margins don't apply / overlap if the image is left or right aligned:

Editor:

Frontend:

[michaelbourne]

I have this problem without even resizing images. components-resizable-box__container has a max height set that's shorter than the full size image, and the content after it overlaps it. Seems to happen any time I have a large landscape image and insert it as size full.

[Mamaduka]

@paaljoachim, I think this is the same issue as #12168. Can we close this as a duplicate?

[paaljoachim]

Hey @Mamaduka George.
Sure. Closing this issue. I added the still open associated Image block issues to the other issue.