Respecting image size

This plugin won’t respect any of the image sizing rules I try to apply. It renders the image at full page width which also has the issue of enlarging images of a lower resolution (this always looks terrible). The one variation I was able to size correctly results in a scaling issues with the 2nd comparison image. Would someone please provide several code examples for successfully modifying image size and alignment control while using this plugin. Thank you I’ve tried: Using img command modifiers like width=”400″ height=”600″ Using image class sizes (small, medium, large) built into wordpress and similar classes provided by plugins. [compare] <figure class="wp-block-image size-large is-resized"><img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512"></figure> <figure class="wp-block-image size-large is-resized"><img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512"></figure> [/compare] Copying the code created by WP editor image block for two images that render the desired size. If we place that code between [compare][/compare] photos render fullscreen and look terrible <figure class="wp-block-image size-large is-resized"> [compare] <img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512"> <img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512"> [/compare] </figure> Copying the code created by WP editor image block for two images that render the desired size. If we place [compare] [/compare] inside that code, it renders the correct size but the second comparison image squishes with the slider instead the normal comparison behavior. <figure class="wp-block-image size-large is-resized"> [compare] <img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512"> <img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512"> [/compare] </figure> Note that I am not a web coder, but I can recognize and implement coding patterns and typically find success with a little exploration. This topic was modified 6 years ago by luxoperon . This topic was modified 6 years ago by luxoperon . Hey @luxoperon , really sorry for the late reply on this one. Basically, the comparison slider will take the width of it’s parent. So if its in a container with the width of 800px, the comparison slider will scale to be that width. You could simply wrap the entire slider in a div and set a size that way. For instance <div style="width: 420px"> ... comparison slider stuff here </div> Let me know how that goes This reply was modified 5 years, 11 months ago by kylewetton .