Make WordPress Core

Opened 2 years ago

Closed 3 days ago

#52545 closed defect (bug) (worksforme)

Twenty Ten: Image block stretched

Reported by: melchoyce's profile melchoyce Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: css Cc:

Description

In Twenty Ten, the image block stretches because it's not constraining the image height, just the width. See attached screenshot.

Attachments (3)

Screen Shot 2021-02-16 at 3.01.14 PM.png (1.1 MB) - added by melchoyce 2 years ago.
52545.diff (551 bytes) - added by melchoyce 2 years ago.
Add height:auto to image block, and remove the left/right margin being inherited by browser defaults so image bocks can be full-width.
52545.2.diff (600 bytes) - added by melchoyce 2 years ago.
Remove all default browser figure styles

Download all attachments as: .zip

Change History (5)

@melchoyce
2 years ago

Add height:auto to image block, and remove the left/right margin being inherited by browser defaults so image bocks can be full-width.

#1 @melchoyce
2 years ago

  • Keywords has-patch added

@melchoyce
2 years ago

Remove all default browser figure styles

#2 @sabernhardt
3 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

This seems to work now, with the editor's block-library styles:

/* theme.css */
.wp-block-image {
  margin: 0 0 1em;
}
/* style.css */
.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}
Note: See TracTickets for help on using tickets.