search

NeuroGrid / folk-on-the-hill

For the Harrow Folk Festival
MIT License
0 stars 2 forks source link

image cropping on phone is a problem #43

Closed tansaku closed 5 years ago

tansaku commented 5 years ago

tansaku commented 5 years ago

Perhaps we should just reduce the image size down so that we can see every part of the image

tansaku commented 5 years ago

have made a partial solution by changing the image, but we need a better default solution - maybe auto-downsizing the image?

tansaku commented 5 years ago

client says this is high priority - needs by end of the week

javpet commented 5 years ago

This is really strange @tansaku on 320px which device produces an image like this?

tansaku commented 5 years ago

@javpet iphone

tansaku commented 5 years ago

@javpet can we side step by having the CSS automatically scale down the image so that whatever the image is all of it appears?

javpet commented 5 years ago

It should scaling down automatically, so that's why I was wondering it looks like that. :/ Could you fix it in the end?

tansaku commented 5 years ago

well we don't need to use that image particularly - but many of the other images are being cropped at different resolutions - I'm hoping that maybe we can take a different overall approach that involves no cropping, i.e. reduce width of image to ensure all height is present and vice versa so no cropping ever takes place - currently cropping is happening to some extent on all images

javpet commented 5 years ago

It's hard to have a bulletproof solution since we can't make sure the client will update the same ratio and also the right resolution, so from my side it was more of a protection to use background-image to make sure images are consistent. If we leave space on the left and the right that'll look in my opinion ugly, but of course the artist's face / visual appearance sells the show

tansaku commented 5 years ago

@javpet totally - what would the css command be to make the images leave spaces on each side? just so I can try it out ... thanks :-)

javpet commented 5 years ago

First I think you need to restructure the layout because the images are currently set as background images and not individual image tags, and then doing something like this: https://codepen.io/javpet/pen/bZgxjz

So basically setting the height of the containing element the height you want, and then set the inner image tag's height to 100%, and the width: auto

tansaku commented 5 years ago

thanks @javpet - I've made that change on http://tansaku.folk-on-the-hill.co.uk/ and I think the client will be pleased with that, but seems to be making the old ie browsers even worse if my local windows machine is anything to go by :-(

Guess we have to get some comprehensive browser testing set up ...