Image resize issue: css solution

• 

  racocobdf10654e8 · Member · Feb 26, 2025 at 5:24 pm

  • Copy link
  • Add topic to favorites

  I wish to document a solution I have to a ‘scale image’ problem I wrestled
  with. It was agonizing getting to a solution so I want to post what I did so
  that other non-UI developer types may benefit from my pain!

  The problem was that a photo I took of a book, which was standing
  upright so that I could post the binder edge (that had title, author,
  publisher detail; the from cover was blank). The resulting (cropped) photo was
  obviously thin (just the book binder width) and comparatively tall.

  When I imported the image into my WordPress/WooCommerce Product page, it was ridiculously tall. It made the Product page look amateurish: one had to scroll
  more than a full browser screen of mostly blank page (just a skinny, tall
  book).

  I tried scaling it in Gimp, even flattening the image and setting its height to
  6″. That had zero effect. I played around with pixel density settings, using
  %-age instead of absolute heights, etc. Absolutely nothing worked. Anything I did in GIMP was a no-op when imported into my Product page. I have no
  idea why. (Any imaging experts out there that can explain why?)

  Finally, I had to resort to a coding solution. I am not a UI developer so this was a struggle to figure out. Also, I was not able to find my Product pages anywhere in any WordPress directory (under public_htmp/wp). I assume that WP generates HTML code via .php functions at page request time? ANyone know?

  What I finally got to work was the following:

  * Bring up WordPress admin: https://<your domain>/wp/wp-admin
  
  * Select the Customizer (https://<your domain>/wp/wp-admin/customize.php)
  
  * In the left vertical frame, expand the "Additional CSS" menu selection

  In the “Customizing Additional CSS” dialog, I added these two lines.

  .woocommerce div.product div.images img,
  .woocommerce ul.products li.product a img{ width: auto; height: 500px; }

  For me, it was critical that I kept the width set to “auto”. I suspect that was
  because I didn’t want it to be proportionally reduced with any height reduction since I cropped the original photo. I could not afford to lose any image width.

  The value of 500px for the height worked for me: the image size I chose worked well for all of my Product pages, at least so far.

  Note: You can determine the CSS class names above by going to the Parent page that had the link to the Product page where the image resided. I right-mouse-clicked on that Parent page to bring up the context menu where I selected the
  “view page source” menu item.

  Also note that the above CSS setting will be applied to all Product page images
  so I suppose it might be a problematic solution for some. For me it continues
  to work great.
  You can see examples at: https://racoco.net/wp/home/reading-media/

  Hope this is helpful to someone else.

  Rich

  The blog I need help with is: (visible only to logged in users)

• 

  honhonjaccuse · Member · Feb 26, 2025 at 7:24 pm

  • Copy link

  Thanks for sharing! I will mark the topic as resolved.