Skip to content

Commit

Permalink
Snap to max width after resize
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin940726 committed Aug 1, 2024
1 parent 59b9d05 commit 858d8a2
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion packages/block-library/src/image/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -962,12 +962,20 @@ export default function Image( {
onResizeStart={ onResizeStart }
onResizeStop={ ( event, direction, elt ) => {
onResizeStop();

let resizedWidth = `${ elt.offsetWidth }px`;
// Set width to 'auto' if the resized width is close to the max-content width.
if ( Math.abs( elt.offsetWidth - maxContentWidth ) < 10 ) {
resizedWidth = 'auto';
elt.style.width = 'auto';
}

// Since the aspect ratio is locked when resizing, we can
// use the width of the resized element to calculate the
// height in CSS to prevent stretching when the max-width
// is reached.
setAttributes( {
width: `${ elt.offsetWidth }px`,
width: resizedWidth,
height: 'auto',
aspectRatio:
ratio === naturalRatio
Expand Down

0 comments on commit 858d8a2

Please sign in to comment.