How to edit the CSS of an image Link made by <a>

Asked

Viewed 162 times

1

Wanted to round the edges of an image she was made with the tag <a> HTML, but I’m totally lost.

This is the code I used to import the image:

<a className="imagepost" href={post}>
   <img src={post.image} 
        alt={post.id} 
        maxwidth="100%" 
        width="100%" 
        height="410px" 
    />
</a>

The reason I don’t round up for another program and then import, is because I’m going to import automated images, as you can see I created a function to make it automatic.

In the CSS I even tried to put the border-radius, but it didn’t work.

a.imagepost:link, a.imagepost:visited { 
    border-radius: 10px;
javascript html css react image
  • 1

    Two things should be done: to say that A is a block, and to say that the overflow is hidden.

  • I just tried, but it didn’t work.

  • Another option, put the border-Radius: right on the image and not on A

1 answer

0


Wouldn’t it be putting a a img and configure, follows example that when you do not have in this configuration the image comes normal, example:

a img {
  border-radius: 50%;
}
<a>
  <img src="https://fakeimg.pl/100/">
</a>
<a>
  <img src="https://fakeimg.pl/100/">
</a>
<a>
  <img src="https://fakeimg.pl/100/">
</a>
<p>
  <img src="https://fakeimg.pl/100/">
</p>

  • 1

    Exactly that, vlw, so simple :3

  • @Wellingtona.Moreira then tick as answer to your question!

Browser other questions tagged javascript html css react image

You are not signed in. Login or sign up in order to post.