My image not circle please help

Webdesign Help
1

here my code

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

Capture
Capture726Ă—453 59.8 KB

2

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

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

img {
  object-fit: cover;
}
3

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).

4

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

@martin
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;
</code></pre>;

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">
</code></pre>
5

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

6

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.

7

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

8

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