I didn’t think you understood the concept:)
When you have an image that is created at 500px width by 250px height for example then it has an aspect ratio of 2:1. That means the width is twice the height. For an image that is 1920 x 1080 the aspect ratio is 16:9.
Now to maintain that aspect ratio when you reduce/increase any of the dimensions then the other dimension must also increase/decrease accordingly to maintain the same aspect ratio. If you do not keep the same aspect ratio then the image becomes squashed or stretched and is no longer a natural image. Imagine stretching the width of an image of a real person but still keeping the height the same. You would end up with a very wide person at the same height. That is not a natural phenomenon
Suffice to say that for real world images (other than miscellaneous shapes and colours) you should never lose the aspect ratio. I don’t like so say ‘never’ but 99% of the time a real world image must not be distorted. There are odd occasions and depending on the image it may not look too bad for a small distortion but if you have that kind of control over the image then you could have avoided the problem by choosing only suitable images to start with.
I’d need to see the live page but those image look distorted to me and the second image looks massive compared to the tiny bit of a text. I can’t see that working in any sense of the word:)[quote=“neil, post:15, topic:293073”]
No no, I didn’t want the image height matching the content
Well actually in your first thread you said:
That suggested to me that the image should always match the height of the text. What else could it mean?
Either the text creates the height of the row or the image does? You can’t say one without the other. The image would naturally fill the height of the row if it were the larger element so the statement only makes sense in that the image should match the height of the text and indeed would be my preference unless this is just an image gallery with captions. It also seemed to be the same question that was asked in the other thread I linked to where an image needed to fill the space at the side of some text no matter how much text was present.
Maybe I have misunderstood what you want to achieve but if all you are going to have is little snippets of text that are perhaps image captions and images of various heights then I think a complete change of design would be in order.
I gave you a very small JS fix for that and IE is showing exactly the same as other browsers because it is using background-size:cover. I still believe this to be the best (and best looking solution).
The above demo looks perfect to me and makes perfect sense in any situation. You may lose a bit of the image outside the viewport but with any reasonable image it looks great as in my example of various sized images. It works when the page is resized and the image still fills the space nicely. Of course at narrower widths a media query should be added to either allow the image more room or break them both onto separate lines so the text and image can have the full width…
It also looks exactly the same in IE11.
Your image of a dartboard is a perfect example of aspect ratio and because the image is square (i.e. the dartboard is a circle) then its image aspect ratio is 1:1. However in you screenshot you are trying to show it in a space that is not 1:1 so I don’t see how you can think it will fit in any other way other than to ‘cover’ or ‘contain’. There simply is no other option!
At the moment we are going around in circles a bit here and you need to either settle for cover or contain:) There really is no other viable choice for real world images.
You could make the images a fixed height but that means the width would need to be fluid which doesn’t work for the 60/40 split as the width may need to exceed the available width when the aspect ratio requires it. If you had a letter box type image and you set it at a fixed height it’s with may need more than the whole screen width to show it so once again you would need to crop the image somewhere.
As I have said a few times this is a basic maths question and you can’t bend the laws of the universe and just make an image fit whatever - something has to give:)
Sorry to ramble on a bit but I’ve seen this question many times now and coded this in hundreds of real world sites so I know what will work and what certainly doesn’t work. Sometimes the concept is hard for people to grasp which is why I use the analogy of a picture of a face. That face will only look normal when its width and height are maintained at the same aspect ratio. Any deviation from that path results in the sort of thing you’d see in a crazy mirror at a fairground