Yes, I explained in my post that you should choose images of letterbox proportions and not square. Its a simple mater of mathematics and very little to do with css.
You can’t stretch an image unless you maintain aspect ratio so wider images mean taller heights as well if you want the whole image. How else can it work?
I’m afraid I don’t have any suggestions for where to get images from as I leave that to the designers to come up with but you must choose carefully and I would choose images with a smaller central focal point so that when stretched they still stay in your letterbox view.
Will it’s not a round hole, but same principle. You are trying to put a shoe-box through a letter-box, it does not fit! You must either chop it or squash it to fit.
Either be happy with that shot cropped, or find a shot in a wide aspect.
In addition, if you want to retain a fixed aspect (have no cropping of your wide aspect image) don’t have a fixed height combined with a variable width as you have.
So you could have width: 100%; height: 20%; I say 20% there, but whatever % creates the desired aspect.
I have exactly that here, all the header photos are 900 x 200 px in size (also set in the img tag), in css the container has max-width: 900px; and the id for the image is 100%; height: 20%; to maintain that aspect.
SamA74,
You should read before throwing and insulting response!
As stated already, we have already arrived at what you have stated with your insulting “square pegs and round holes” analogy and are now at the phase of asking:
“where can we find the suitable photo dimensions”?
And also as per PaulB suggestion Photos that have “images with a smaller central focal point”.
To be exact, we need then the correct Photo dimensions, which are high quality (resolution) of World Cities. So where can we get or Buy the Photos which would fit this theme and are:
" letterbox proportions"
&
“have smaller central focal point”.
Sorry, I did not intend to sound insulting. My apology for any offence.
I was just trying to illustrate the point so it was easy to understand, I got the impression you had difficulty grasping the idea.
That link leads to photos of Golden Gate Bridge only.
We need Photos of World Top Cities (Sites), of which of course GG is one.
And of course as per this discussion we need the Photos to be:
High resolution photos of Cities that are of letterbox proportions and have smaller central focal point
FYI, I have searched for this phrase on Google and have found nothing really.
So any suggestions where we can find such photos for free or paid, would be great.
I can’t help you with finding images I’m afraid but just to illustrate the point I have been making if you choose this image from the link that Sam shown above and test it instead of your own image (also change css to background-size:cover) you will see that it scales much better and doesn’t lose its impact.
As I replied, we have ALREADY chosen that wide image of GoldenGate. We just need more such images of World Great Cities (sites) beside that one image. And as I wrote I searched online but so far cannot find any more such wide images for free or even for paid.
That is why I was hoping you all could suggest a good site for such Wide images.
Most of the stock photo sites allow you to search for orientation of image but of course you may need ot pay for the images. There are quite a few images here and this was my first try.
You could try Pixabay. Their images are free to use, although whether you’ll find what you want, I don’t know. (Some of their links go to Shutterstock, which is a paid service, but they’re clearly marked. Just stick with the Pixabay images if you want free ones.)
There are also a number of threads - mainly in the Content category - with suggestions for free image services. Have a look around there. This is one of the most recent:
Thanks man.
I will check out both of these sources.
FYI, it is not that we are cheap, it is just that we are a non-VC funded, Social Search engine, trying to give People an alt Choice to Google and Big Wall Street Media, so we need to save on every corner that we can and unless we have to rather not buy something and get it for free as much as possible,
“World Cities” means exactly: New York, Chicago, Tokyo and Stockholm, etc.
Basically the top Cities of the World, and that generally means the Capital, but can be others.
But please keep in mind that as per discussion above, we need Photos that are:
“High resolution photos that are letterbox proportions and have smaller central focal point”