Image skews in smaller screens

[Carro000]

Hello,

I'm working in DW/Bootstrap and I actually never came across this before, but I have an image, looks fine in the desktop view, but when I make the screen smaller, the image gets all skewed and looks really bad. It can be seen here: http://kennelmannequins.se/1Alarm/hemlarm.html, not the header image, but the one in the container. I have tried to re-make the image several times, but I can't simply get it to work. If somebody could help me with this, I would be very grateful!

Kind regards Carolin

[Ben M · Accepted solution]

I was able to solve it with 2 changes:

Original code:

<div class="row"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"> </div>

New code:

<div class="row"><div class="col"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"></div></div>

First, to keep the bootstrap structure it is always best to make sure you have columns inside your rows even if the column is the full width. The "bildpadding" was always affecting the resizing.  If you need to add padding you can use the "p-" classes to add padding to your image instead of the custom CSS.  https://getbootstrap.com/docs/4.4/utilities/spacing/

[Carro000]

Thank you so much, it's working now! And thank you for the tip on padding, I'll check that out!

Have a nice weekend 🙂

Kind regards, Carolin