My image not circle please help

here my code

<div><img class="rounded-circle img-fluid" src="pexels-uriel-mont-6280957.jpg" width="200" /></div>

If you want the image to be round, you must set the width and height to the same value.
In your case width=“200” height=“200”. You can remove the img-fluid class

If your image gets distorted add this css class to a stylesheet file

img {
  object-fit: cover;

What @kuligaposten said.

if you want am image to have a perfect circle, make sure that you use a square image (same width and height).

The pictures don’t have to be square to have them in a circle
here is an example

Is it new that bss change custom code snippet when preview, export or publish a site?

in bss

<pre><code class="language-html">
  &lt;img class="img-fluid" src="pic1.webp" width="768" height="960" alt="nice image"&gt;

when publish the code snippet it looks like this

<pre><code class="language-html">
  <img class="img-fluid" src="/assets/img/pic1.webp?h=01e6039ad77c7815f573da7d2dcb9703" width="768" height="960" alt="nice image">

Well, that is true, but it saves from having to use custom css to make it work.

I am afraid I can’t reproduce this issue. Adding your snippet in Custom Code keeps the < and > encoded the same way in the app and when published.

It keeps the < and > but it change in this case the img src

Thank you for the info! In custom code, src attributes are always rewritten if you have an image with the same name in your design. The app currently doesn’t take into consideration <pre> tags so it will rewrite any src that it sees. You can change the image name in your <pre> to prevent this.

1 Like