I find it a bit silly that I have to do this, but for some very odd reason I can’t explain, the default Image object doesn’t actually work as intended for static images
When trying to drop a static image into a page, the default width to height ratio is assumed to be 1x1. If you try to make the ratio of width to height less than that, you can’t. You also can’t just force Bubble to keep the image width and height unset (from what I can tell).
You would think that it should take all of 10 seconds to add an image to a page and make it render to unset width and height by default.
Nope.
I tried playing with various settings and then I looked into the code and found a very odd thing. A div with class “aspect-ratio” that has a “padding-top” value that corresponds to the rendered image height in the browser (2nd line below)!!
<div class="bubble-element Image baTaJaJaM">
<div class="aspect-ratio" style="padding-top: 133.344px;"></div>
<img src="xxxxw=512&h=155&auto=compress&dpr=1.5&fit=max" style="height: unset;">
</div>
WTF. LOL. I have worked in Tech for 20 years. I just know this is a back-end programmer with little browser knowledge. I had a good chuckle.
Anyways, so I wrote some JQUERY that basically fixes your images so they render responsively inside of whatever container you place them in (use a group and control your image default width that way)
To use the script below:
- Add an HTML file to your page
- Drop everything below into it
What it does:
-
Looks for any div with class bubble-element Image
-
Look for the div inside it with class aspect-ratio
-
Gets the rendered image height and sets the aspect-ratio padding-top to this value in pixels.
<script> $(document).ready(function() { // Find div with class "bubble-element Image" var $bubbleElement = $("div.bubble-element.Image"); // Find div inside the above div with class "aspect-ratio" var $aspectRatio = $bubbleElement.find("div.aspect-ratio"); // Set the height of all <img> tags inside the found div to unset $bubbleElement.find("img").height("unset"); // Recalculate and set the padding-top value based on the image height function setPaddingTop() { // Get the height of the image var imageHeight = $bubbleElement.find("img").height(); // Set the padding-top of the aspect ratio div to the image height in pixels $aspectRatio.css("padding-top", imageHeight + "px"); } // Initial calculation of padding-top value setPaddingTop(); // Recalculate padding-top value when the browser window is resized $(window).on("resize", function() { setPaddingTop(); }); }); <script>