1

Estou tentando colocar uma moldura diferente na imagem mas não esta dando certo, segue como estou fazendo, quero a imagem dentro da moldura com um hidden

inserir a descrição da imagem aqui

o html

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

o css

.depoimentos__moldura{
 background: url(../img/moldura.png) 0 0 no-repeat;
 width: 100%;
 height: 500px;
 overflow: hidden;
}
6
  • sua foto tem que estar como PNG, e ai não ficara esse fundo branco, você quer ajuda pra posicionar a mulher dentro da moldura ? Commented 1/12/2017 às 11:54
  • isso ficar a imagem dentro da moldura, porém se a imagem for maior que a moldura, não poderá passar da moldura Commented 1/12/2017 às 11:58
  • jovem, fazer dessa maneira é 1000 vezes mais dificil do que se vc editar essa imagem ai! ah acho que eu sei o que você quer, tem um cadastro de usuario que o mesmo insere sua foto? e você quer colocar a imagem do usuario dentro de uma div ? nesse caso essa moldura tera que ser um componente html Commented 1/12/2017 às 12:02
  • isso, sempre vai ser dinamicamente para inserir as fotos, tipo esses sites de cartões de aniversário que você envia a foto e já saí na moldura Commented 1/12/2017 às 12:04
  • essa moldura tem que ser um componente html, tem problema ? Commented 1/12/2017 às 12:05

2 Respostas 2

2

Defina sua moldura como background e centralize a imagem com um padding referente a moldura, logo qualquer imagem adicionada, irá se adaptar;

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>

Com o container relativo...

    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>

1

Pelo que entendi vc quer colocar a imagem dentro da borda, logo se a imagem for maior que a borda o que estiver sobrando fica cortado. Tipo quando o Pai tem overflow:hidden e o filho é maior que o pai, o que sobra fica escondido.

Fiz esse modelo que acho que deve te atender. Abaixo explico a técnica

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>

O que eu fiz foi colocar 2 imagens de 200px em uma "mascara" de 100px, depois alinhei a imagem no centro de cada mascara, e rotacionei uma delas em 45deg. Depois fiz o mesmo processo com duas divs vazias por baixo das imagens, nessas divs eu fiz o boder com box-shadow

1
  • Assim mesmo! Salvou o dia! Obrigado! Commented 1/12/2017 às 15:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .