How to put frame on an image?

Question

I’m trying to put a different frame on the image but it’s not working, follow how I’m doing, I want the image inside the frame with a Hidden

the html

<div class="depoimentos__moldura">  
    <img alt="depoimento" src="img/foto-depoimento.png">    
</div>

the css

.depoimentos__moldura{
 background: url(../img/moldura.png) 0 0 no-repeat;
 width: 100%;
 height: 500px;
 overflow: hidden;
}

Answer 1

Set your frame to the background and Center the image with a frame padding, so any image you add will adapt;

div {
  height: 300px;
  width: 300px;
  background-color: gray;
  background: url("http://2.bp.blogspot.com/-Yyn6fnpdfu8/Tpy3DXHitsI/AAAAAAAAImo/ypGw-QfWJN4/s1600/franes-molduras-blog-photoscape-png-blogs-templates-by-thataschultz20111017-dodiesw_photoframes_03.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.0%;
  display:flex;
  align-items: center;
  justify-content: center;
}
div img {
  width: 80%;
}

<div>
 <img src="https://fakeimg.pl/200/">
</div>

With the relative container...

    div {
      background-color: gray;
      background: url("http://2.bp.blogspot.com/-Yyn6fnpdfu8/Tpy3DXHitsI/AAAAAAAAImo/ypGw-QfWJN4/s1600/franes-molduras-blog-photoscape-png-blogs-templates-by-thataschultz20111017-dodiesw_photoframes_03.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5%;
      display:flex;
      align-items: center;
      justify-content: center;
    }
    div img {
      width: 100%;
    }

<div>
   <img src="https://fakeimg.pl/200/">
</div>

Answer 2

From what I understand you want to put the image inside the border, so if the image is larger than the border what is left is cut. Like when the Father has overflow:Idden and the son is bigger than the father, what is left is hidden.

I made this model that I think should suit you. I explain below the technique

body {
    margin: 50px;
}
.mr90 {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    position: absolute;
    background-color: transparent;
    box-shadow: 0 0 0 10px orangered;
    z-index: -1;
}
.r90 {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    position: absolute;
}
.r90 img{
    width: 200px;
    height: 200px;
    position: absolute;
    top: -50px;
    left: -50px;
}
.mr45 {
    transform: rotate(45deg);
    width: 100px;
    height: 100px;
    border-radius: 20px;
    position: absolute;
    background-color: transparent;
    box-shadow: 0 0 0 10px orangered;
    z-index: -1;
}
.r45 {
    transform: rotate(45deg);
    width: 100px;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    position: absolute;
}
.r45 img{
    width: 200px;
    height: 200px;
    border-radius: 20px;
    position: absolute;
    transform: rotate(-45deg);
    top: -50px;
    left: -50px;
}

<div class="r90">
    <img src="http://fillmurray.com/g/200/200" alt="">
</div>
<div class="r45">
    <img src="http://fillmurray.com/g/200/200" alt="">
</div>
<div class="mr90"></div>
<div class="mr45"></div>

What I did was I put 2 200px images in a 100px "mask," then lined up the image in the center of each mask, and rotated one of them in 45deg. Then I did the same process with two empty Ivs underneath the images, in those Ivs I did the Boder with box-shadow