Trouble Seeing Whole Images On Ebay

Am I the only one having trouble seeing full width images when browsing items in a stamp category? I'm getting it with both Edge and Chrome (and no, I have no clue how to find out what version I am using) with Windows 10.

It is extremely frustrating having to click thru to be able to see the full image just to see the left and right sides.

?
Have you tried CTRL key, then tapping minus key

Your image should alter, using CTRL and + or - key

Try clearing your cache, refresh or clearing your browsing data. If that doesn't work, reboot.

Chrome Version

click......
3 dots upper right hand screen
Help
about Google Chrome

Voila!
Google Chrome is up to date
Version 87.0.4280.141 (Official Build) (64-bit)

..............

Clear Browsing Data

3 dots
More Tools
Clear Browsing Data

I think I see what you're talking about, and it's not something you can fix.

The layout in both the list and grid views has the photos as squares. In web design, when you force rectangular photos into squares, you can do it in several ways. The way ebay has chosen to do it, called "cover", maintains the image's aspect ratio (meaning it's not stretched or smooshed), and resizes the image to fill the entire square. This means that tall rectangles will get clipped at the top and bottom, and wide rectangles will get clipped at the left and right.

There's nothing you can do about it, as it's a design choice on their end.

For those who are interested, you can see what I mean in this demo.

Are we able to see an example ebay listing please?

Rod,

As an example, here's one of the photos I see when browsing the Germany category. Note how the left and right side are cropped off.

When I open the listing for that lot, the full image appears like this:

I'll also note that the full image in the listing is also in a square, but they're using a different method ("contain") which shows the entire image, with the white background filling the rest of the square at top and bottom.

Thank you Postmaster,
I don't recall coming across this before.
I recall the ones where the cursor, roams around a stamp,
just a double click to get the full image.

I'll take note whence I meet.

I'm seeing the same thing in Chrome, and it is a new phenomenon.

This is something recent. Never happened before. ebay must have changed their software.

This is something recent. ebay must have changed their software.
Never happened before.

Hmmm... I thought I had posted yesterday that what Postmaster showed is exactly what I see and that it is a stupid choice ebay made. I wonder if they think if we click thru to see the full pic we are more likely to buy or perhaps they are just trying to generate more click thrus so they can tell the sellers there are more people viewing their items or if they had no reason for it at all. It is just ridiculous they make a big deal about pics having to be 500 pixels wide (or tall) or larger and they push multiple pics and then they ruin the pics.

For those who are interested, here's a fix. It requires the use of browser extensions. I can't vouch for the reliability, security, etc., of the extensions, so the usual caveats apply.

Chromium-based browsers (Chrome, Chromium, Brave, Opera, Vivaldi, Edge?)

I haven't tested this on all browsers. Some extensions don't run well on all the Chromium-based browsers due to minor differences in the browsers. I have tested it on Brave, as that's what I use.

1. In your browser, go to the this page in the Chrome Web Store
2. Click the button to install the "User CSS" extension
3. There should now be an icon somewhere in the bar of your browser. The location may vary by browser. In Chrome and Brave, it is initially visible under the puzzle piece icon:

To pin it to the bar without having to go to the puzzle piece every time, click the pin icon next to the User CSS icon.
4. Go to an ebay category listing
5. Click the User CSS icon in the browser bar. You should get a large white area at the right of your browser window.

6. Paste this code in the white window.

.s-item__image-wrapper--crop .s-item__image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.s-item__image-wrapper--crop.s-item__image-wrapper--crop-top .s-item__image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.s-item__image-helper {
  height: 100%;
}

7. Tick the slider at the top of the white box to "On"

The code is injected per domain. So, if you enter it on an ebay.com page, it will apply to all ebay.com pages. If you then want it to apply to ebay.co.uk, ebay.de, etc., you'll need to repeat steps 4-7 above on a listing from each of those sites.

Firefox

1. Go to this page in the Firefox add-ons store.
2. Click the button to install the extension.
3. There should now be a needle icon in the browser bar.

4. Go to an ebay category listing and click the needle icon in the browser bar. You should see this window.

5. Paste this code in the gray area entitled "Edit Custom CSS"

.s-item__image-wrapper--crop .s-item__image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.s-item__image-wrapper--crop.s-item__image-wrapper--crop-top .s-item__image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.s-item__image-helper {
  height: 100%;
}

6. Click the "Apply to Domain" button and click "Save"

The code is injected per domain. So, if you enter it on an ebay.com page, it will apply to all ebay.com pages. If you then want it to apply to ebay.co.uk, ebay.de, etc., you'll need to repeat steps 4-6 above on a listing from each of those sites.

Safari

Implementing this solution on Safari requires the use of a paid extension, Cascadea ($2.99 on the App Store).

1. Install Cascadea from the App Store
2. Follow the prompts to enable it in Safari
3. Once it's enabled, you'll see a window like this:

4. Click the plus sign to add a style
5. Give it a name (ex., ebay Photos), enter "ebay.com" in the domain box, and click "Create"
6. It will open a window (if the window has green text, delete the text). Paste in this code:

.s-item__image-wrapper--crop .s-item__image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.s-item__image-wrapper--crop.s-item__image-wrapper--crop-top .s-item__image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.s-item__image-helper {
  height: 100%;
}

7. Close the window, saying yes to save it.

The code is injected per domain. So, if you enter "eBay.com" as the domain, it will apply to all ebay.com pages. If you then want it to apply to ebay.co.uk, ebay.de, etc., you'll need to repeat steps 5-8 above for each domain.

If you run into any problems, just drop a note and I'll see if I can help.

Wow!
that is just awesome.

Surprising it is needed in this day and age.

I notice with Windows 10, there is so much more hassle, than using Win7
I get more scam adverts W10, edge asking me to change all the time.
One good thing with Win10 , no more hacks (that I know of :)

I thought this stuff was supposed to get EASIER and MORE USER FRIENDLY with all our new technology! Clearly, I am an idiot. But you already knew that.

Lordy, that's all website developers and owners need now; browser plugins that override webpage code. I am definitively going to send all support calls and emails to PostmasterGS!! (Just kidding, of course this is not his fault.) It was already nearly impossible to support the complexity of browser/operating system/version combinations; having these kinds of plugins makes it very easy for website owners to just give up on supporting anyone.

The original issue that eyeonwall reported is an issue that is common for 'user uploaded' images. As a developer, you have one of two choices; either make the image responsive or not. (In other words, automatically scale the image to fit the designated area or not.) The problem with forcing the image to scale is that many users uploaded stamp images without cropping them. Sure, you will see the entire image but the stamp will be a tiny, unrecognizable dot in the middle of the image. This generates as many complaints as not scaling the images. Below is the issue illustrated, you have 150 pixel space on the webpage and you need to display user uploaded images. The user uploads an image that is 1600 pixels wide but the stamps is only a tiny amount of image size because the user did not crop the black out of the image. If you use code to make the image to automatically scale then you get the entire image and the small is tiny. If you leave the uncropped image at its native resolution, it displays only part of the stamp.

Don