Creating border around a dynamic photo

HTML-CSS
1

Hello guys,

I need to make border around a dynamic photo, but it doesn’t work(see the picture).

Here is the code of CSS:

a
{border:3px Black solid; }

And the code of HTML:

<a href="big-size.png" > 
<img src="mini-size.png" alt="photo de cv">  
</a>

When I try to do that around a text it works, but it doesn’t work for my dynamic photo, I see a line on the bottom part but not on left, right and top.

Thank you in advance for your help.

Loussine

Capture d’écran 2020-11-12 à 12.07.53
Capture d’écran 2020-11-12 à 12.07.53648×676 90.9 KB

2

Hi @Loussine. You can try the code below.

a{
  border: 3px solid black;
  display:block;
}
img{
  width: 100%;
  display: block;
  height: 100%;
}

I suspect it is behaving that way because you are dealing with inline elements i.e. a and img.
EDITED

1 Like
3

Hello @nibble ,

Thank you, I juste tried, but it doesn’t work, the photo is very big now( see picture).

Capture d’écran 2020-11-12 à 12.46.20
Capture d’écran 2020-11-12 à 12.46.203174×2046 966 KB

4

@nibble it ok, I tried like wit display:inline-block;It works.
Thank you:)

a{
  border: 3px solid black;
  display:inline-block;
}
img{
  width: 100%;
  display: block;
  height: 100%;
}
5

@Loussine For photos you have to set width to the 100% and max-width to the actual resolution of the photo and set the height to auto.

img {
    width: 100%;
    height: auto;
    max-width: 500px;
}

This will set all img to a maximum width of 500px.