When I place an image (img-fluid) in a column the aspect ratio is not honored by BootstrapStudio.
The width is set correctly to 100% but most images have a height that is not correct thus making the image to look horizontaly stretched.
How can I make sure that the ratio between width and height is always correct.
There's no difference between displaying the webpage on a mobile or PC device.
I've already tested this:
.MorePhotos {
width:100%;
height:100%;
/* also tested height:auto;*/
}
Are you adding the class "img-fluid" manually or are you clicking the button to make the image responsive in the options pane? You should be clicking the options pane button which makes your image not only fluid but fully responsive. That will make your image aspects show correctly as well. You shouldn't have to add any manual classes to your images to make them look right other than if you need to add things like borders and shadows etc.
I'm adding the img-fluid option through the options pane. I believed that to be the easiest solution but it doesn't work so I tried adding an extra class with all those width and height settings.
And still I get horizontally stretched images...
I've even removed the image and added it again but still same problem
Just hit the button that slides over for turning on the Responsive settings for the image. That's all you should need to do for making it size correctly.
I've done this. I posted this message because for some reason it doesn't work for me. I even started from scratch to make sure I didn't set anything incorrect somewhere.
Still my images are stretched horizontally...
Jo, I've published the site.
Go to https://forumdemo.bss.design/Pages/Artists/PicturePages/BaramPhotos.html to see what is going on. The first photo is stretched horizontally.
The other too but it isn't that noticable.
