Is it possible to set an image size/crop without editing the image? For example, set a 400x400 px image to “contain”, so that it automatically resizes without distorting it. Or would I have to define this as a custom class?
Once you add an image to a brick it will fill the column size. The image ratio will be kept the same no matter how big the column is. 4 column smaller, 8 column bigger. You can use the side panel to adjust the image size width and it will automatically adjust the height in the same image ratio.
If you resize an image that has a 3x2 ratio to your 1x1 ratio (400x400) then blocs will distort the image.
Blocs plus with its built-in image editor makes this really easy to fix. Say you have a image that is 3x2 ratio that’s 1200x800 and you want to make a 1x1 ratio that’s 800x800. Just open the image in the image editor and crop it with the 1x1 ratio, save it with a new name and you are good to go.
Any image can be resized by either using the sidebar or a custom class. The custom class allow you to further customize the image, say maybe a drop shadow around the image.
The thing to remember if that you have to resize an image using the same ratio, if you plug in different values on each side it will distort the image.
Hope this helps.
Casey
Thanks Casey, this is really helpful. I’m moving over to Blocs from Bootstrap Studio so I’m in the process of getting used to how things are done in Blocs. Im finding it really intuitive at the moment but hitting a few stumbling blocks (excuse the pun) along the way.
Best wishes
Andy
2 Likes
Welcome to Blocs @Oblique - once you find your way around Blocs you will work so fluently.
Its a great forum here too with so many people of all levels able to offer help and advice.
if you want a great source of step by step knowledge right now then check out the new course from @Eldar - this will show everything and even people who have used Blocs inside out learn things we never knew from this. Also he is an active member of this forum.
Whenever I need to work on something and struggle or want a better work flow for it, i check on this bric/element from the menu and its all there. Link below. Today is the last day of his special pricing ! so grab it while its HOT!
2 Likes
Thanks @AdieJAM, I’ve been following the forum for a while now and I’ve been really impressed with how helpful and friendly the community is. It’s one of the main reasons I decided to make the switch. I’ve been really tempted to buy the tutorials from @Eldar but it’s been a very expensive weekend already! I’ve bought the Blocs 4 plus upgrade, Volt CMS and the BF bundle from @Whittfield. There’s still time for me to cave in though!
3 Likes
Welcome @Oblique!
Thank you so much for your support! 
We’re one big happy family. @PeteSharp breaks something we help him fix it. 
(just teasing, actually he’s one of the most helpful people, great guy!)
3 Likes
That made me laugh !!!
It is a great forum
1 Like
brilliant ! Well you have bought some great things there and this give you all the tools to create some amazing things !
haha !! yeah - still time to Cave in…specially as the sale ends very very soon!!, and remember they get updated so there will be more added…and there is a lot to learn with Blocs 4 and much much more coming out.
Either way - I look forward to seeing what you create and good luck on here.
I can always count on you guys to get me out of a pickle 
3 Likes
Same goes both ways sir!
3 Likes
Thanks for the warm welcome guys, I’m sure I’ll have plenty more questions to come!
Blocs isn’t “Bootstrap complete” like Bootstrap studio is, therefore much easier to use. For the many missing Bootstrap (and other) features I am just adding the Boostrap classes, because the framework is there anyway. Or I add the code widget and custom CSS.
In your case justify-content:center; for the div and object-fit: cover; for the containing image would do the trick I guess.
Adjusting the image files as suggested is a great solution, but what if it’s CMS and users upload pics of weird resolutions? 