I'm trying to put a different frame in the image but it's not working, follow how I'm doing, I want the image inside the frame with a hidden
orhtml
<divclass="depoimentos__moldura">
<img alt="depoimento" src="img/foto-depoimento.png">
</div>
css
.depoimentos__moldura{
background: url(../img/moldura.png) 0 0 no-repeat;
width: 100%;
height: 500px;
overflow: hidden;
}
So I understand you want to put the image inside the border, so if the image is bigger than the border what is left is cut. Type when the parent has overflow: hidden and the child is larger than the parent, what is left is hidden.
I made this template that I think should suit you. Below I explain 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 put 2 200px images into a 100px "mascara", then aligned the image in the center of each mask, and rotated one of them at 45deg. Then I did the same process with two empty divs below the images, in these divs I made the boder with box-shadow
Set your frame as background and center the image with a frame padding, so any added image 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>Withtherelativecontainer...
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>