Hi I have an issue of when I toggle in between two different thumbnails, the sizing of the image changes. Is it ideal to put a set width and height on images so whenever an image is a different size from another they both look the same in the box that they are contained in.
Rather than setting a fixed with and height, which may stretch or squash images that have a different aspect ratio than your with/height defines, you should use only images of the same size. If they’re not the same size, resize and crop until they are 
but in my use case their is not images of the same size AND if I resize and crop the container starts shifting when switching between thumbnails.
is their a solution in the case of their is going to be different size of images in height?
Depending on how much difference there is in your image sizes you could also scale them and give them a max-height that works for all images.
We would need to see your code or a link to the page to offer much more help.
You could try CSS’ object-fit. See for an example: https://codepen.io/chrisnager/pen/XJRRwo?editors=110
fill and cover seem best suited for your needs.
yeah unfortunately I can’t share my businesses site, it internal only.
I use object-fit in the following codepen with a js fallback for IE11 (and a css fallback in case js is disabled also).
https://codepen.io/paulobrien/pen/bMQXNX
Basically it uses object-fit:cover for modern browsers using the css @supports and then older browsers get the foreground image swapped out for a background image instead so that background-size:cover can be used.
The image container should be the factor in determining the height and width of the actual image and is ideal for fitting images into square or rectangular boxes all of the same size (they can of course be fluid width and height also).
Of course it would take some extra work if you are swapping images on click (or whatever)
seems to be working for me but on the smaller scaled image it cuts it off a bit.
You are governed here by the laws of physics and the only useful option to fill a standard height box is by using the cover value for the object-fit property.
If you use the value ‘fill’ then the image is stretched out of its aspect ratio and no use for real world images (unless its just a random shaped image). Images of people, places and objects have intrinsic aspect ratios which generally cannot be changed without distorting the image (i.e. being stretched or squashed).
When you use the value ‘cover’ then the image is scaled to fit both width and height while maintaining aspect ratio. That of course means that if the image is a different aspect ratio than the box you are trying to fill then the image must be oversized in one direction to fit and is thus clipped at that edge. There simply is no other choice if you want to fill a box that is a different aspect ratio to the image and have the whole box filled up.
If you use the value “contain” the image will fit inside your box but it will not fill the whole box unless it just happens to have the same aspect ratio as the box it is placed in.
These are just the laws of physics and you can’t put a square peg in around hole unless it is smaller than the hole or you chop off its corners
.
our site wont be supported by IE so thats a pass…
ok thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
