Cubic: Slideshow blocks shows images zoomed in

[ariel-maidana]

Quick summary

Regardless of the Alignment settings, the Slideshow block is showing images zoomed in on simple sites with the Cubic theme. Related issue: https://github.com/Automattic/jetpack/issues/12178

p1658354400641829-slack-CB0B2G43X

Steps to reproduce

1. Activate the Cubic theme in a simple site.
2. Create a post.
3. Create a slideshow.
4. Add some images with different aspect ratios.
5. Publish or preview the post.

What you expected to happen

I would expect to see the full images.

What actually happened

Images appeared zoomed in and cropped.

Context

5548552-zd-woothemes

Platform (Simple, Atomic, or both?)

Simple

Theme-specific issue?

Reproduced in Cubic.

Browser, operating system and other notes

No response

Reproducibility

Once

Severity

No response

Available workarounds?

No response

Workaround details

No response

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5548552-zen
• [ ] 5645307-zen
• [ ] 7418975-zen

[jamiepalatnik]

📌 SCRUBBING : RESULT

• Tested on Simple - Replicated
• Tested on Self-hosted - Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Was able to replicate this on a simple and self-hosted test site.
• In my tests this was only happening on the Cubic theme, not when I tested on another theme like Pendant.
• It seems like it is not affecting all images, but some images are zoomed and some of the next image is visible.
• Screenshot:

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[danielbachhuber]

Created a patch D88642-code

[jeffikus]

Reviewed, changes suggested in diff patch.

[danielbachhuber]

@jeffikus Unassigning this from myself. Feel free to ping me if you need any further testing, etc.

[daria2303]

User is asking for an update. It is not clear to me if this is being solved. Could you share some more details?

[danielbachhuber]

@daria2303 I'm not sure where this lives in the Theme team's set of priorities.

You can share this CSS with the user so they can fix it for their site.

@media screen and (min-width: 768px) {
	.wp-block-jetpack-slideshow .image-big {
		margin-left: 0px;
		margin-bottom: 0px;
	}
}

[devNigel]

@danielbachhuber This does not work for the vertical images in the gallery block as seen in this case: 5645307-zd-woothemes

Could you please check?

[danielbachhuber]

@devNigel Sorry for the delay! I was tied up in another project.

Here's some CSS they can use to have the vertical images display fully:

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
  align-items: initial;
}

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure img {
  margin-left: auto;
  margin-right: auto;
}

[Babylon1999]

One more case with Alves theme in zd-5920463

I was able to reproduce it: https://d.pr/i/xT5oAN

[csabarakasz]

43339352-hc Hever theme. CSSs suggested did not work.

[AnjanaV93]

Another report here: 7418975-zen