-
Posts
-
For my home page I used Easy Slider and set its styling to No Scaling (original Width X Original Height) but when a vertical image is added to the slider its size is completely off. I actually don’t know where it comes from. My image is 882 x 980 pixels, but the image displayed (and I measured this by capturing the screen and measuring number of fixes in Photoshop) is on a longer edge (the height) way more than 1300px. The image looks fuzzy and unclear since it’s be resized artificially. Where this number comes from is beyond me too (it’s not twice as long or anything that would make a logical sense).
And why it’s been resized? The “No Scaling” has been selected so noting should be adjusted/resized.
Now, for all horizontal images everything works just fine, but again, not for vertical images.
How do I fix this? Or, is there a fix coming for this problem?Hey Gregg_B,
Could you post a link to where we can see the results you are getting please?
Best regards,
RikardHey Rikard,
Navigate here: http://scenesfromlight.com
The home page has few images. The first one looks good (because it’s horizontal) but second is huge, and completely off. It is also resized so bigger than the actual original image. Rest of the images are OK because again, they are all horizontal.Hi,
Are you referring to this image? http://scenesfromlight.com/wp-content/uploads/2020/07/Neohill.jpg
Or have you removed the image? I believe the issue you’re having is because sliders would make the images cover the whole width, so it will likely stretch horizontal and since the aspect ratio is also preserved it’s also stretched vertically which makes it look out of proportion.There are 2 ways to fix it, one is to adjust the image manually using an image processing software such as photoshop, the second one is via custom css, which I think we can help with. Can you point us to the right image? then we’ll try to give you CSS codes to adjust it.
Best regards,
NikkoI removed the image from the home page. It was a vertical image. Your link points to a horizontal shot. All horizontal images are OK, and not resized. But vertical images are stretched vertically to size that is beyond the original file’s size and so you get pixelation and artificial image resizing artifacts. I put it back so you can see what I’m talking about….
Since the image and home page is basically screwed up, I don’t want to keep it there for a long time. I’ll keep it over this weekend only…
Have a look again, here: http://scenesfromlight.com
On my home page there are few images rotating, the vertical is the second one.
My thoughts what happening:
It looks like your scrip is forcing all images to fit to the width of the home page’s slider. If the width of the image is smaller, it’ll be stretch vertically to the width of what the slider expects, hence unusually long images that look horrible…
This means specifying “No Scaling (Original Width X Original Height) has no effect since all images must match the width of a slider, which it looks like is 1200 pixels. The vertical image is only 800 pixels (1200px on a longer edge). Still, your script will make the 800px width a 1200px, and so will resize the height from 1200 to whatever that ends up to be, a 1600px probably. That’s not right!
Please let me know if this can be fixed. If not, I’ll have to keep showing on my front page only horizontal images.Hi Gregg_B,
Please try to add this CSS code in Quick CSS, located in Enfold > General Styling:
.home .avia-fade-slider img { width: auto; max-width: 100%; max-height: 100vh; }As for No Scaling (Original Width X Original Height), what it basically does is it uses the full size image as source instead of the cropped images.
Let us know if this code helps.Best regards,
Nikko
- You must be logged in to reply to this topic.