4

Bom dia !!
Estou tentando fazer o seguinte:
Criei uma function que ao clicar na foto, manda a foto para a div circular conteudo, o problema é que se a imagem for maior que a div, ela sobrepõe tudo, gostaria de tratar ela para ficar inteira porém dentro da div como na foto:
(Vermelho foto atual sem tratamento) (Azul o modo desejado)
inserir a descrição da imagem aqui

function clickImagem(src)
{
  $('.conteudo').empty();
  var el = document.getElementById('conteudo');
  $('#conteudo').css('background',"url('"+src+"') no-repeat center");
  $('#conteudo-foot').empty();
}
.conteudo{
  width:320px;
  height:300px;
  border-radius:50%;
  border:0.1px solid #000;
  z-index:5;
  background:#fff;
  margin: 35px auto;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="conteudo" class="conteudo"> </div>
<img src="https://tudocommoda.com/wp-content/uploads/2017/02/colar-de-namorados-cora%C3%A7%C3%A3o-1.jpg"  onclick="clickImagem(this.src)">
</html>


Podem me ajudar por favor?

2
  • Você quer que a imagem fique dentro do círculo, perdendo as partes que extrapolam a circuferência ou você quer que a imagem quadrada fique dentro do círculo? Commented 4/10/2017 às 12:09
  • Então, gostaria de saber como faço para a imagem ficar dentro do círculo azul
    – Sora
    Commented 4/10/2017 às 12:10

1 Resposta 1

3

Inline

function clickImagem(src)
{
  $('#conteudo').empty();
  var el = document.getElementById('conteudo');
  $(el).html('<img src="'+src+'">')
}
.conteudo{
  width:320px;
  height:300px;
  border-radius:50%;
  border:0.1px solid #000;
  z-index:5;
  background:#fff;
  margin: 35px auto;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: relative;
  text-align: center;
}
.conteudo > img{
    width: 70%;
    height: 70%;
    position: relative;
    margin-top: 14%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="conteudo" class="conteudo"> </div>
<img src="https://tudocommoda.com/wp-content/uploads/2017/02/colar-de-namorados-cora%C3%A7%C3%A3o-1.jpg"  onclick="clickImagem(this.src)">
</html>

Com flexbox (consulte o suporte http://caniuse.com/flexbox)

function clickImagem(src)
{
  $('#conteudo').empty();
  var el = document.getElementById('conteudo');
  $(el).html('<img src="'+src+'">')
}
.conteudo{
  width:320px;
  height:300px;
  border-radius:50%;
  border:0.1px solid #000;
  z-index:5;
  background:#fff;
  margin: 35px auto;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.conteudo > img{
    width: 70%;
    height: 70%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="conteudo" class="conteudo"> </div>
<img src="https://tudocommoda.com/wp-content/uploads/2017/02/colar-de-namorados-cora%C3%A7%C3%A3o-1.jpg"  onclick="clickImagem(this.src)">
</html>

Com a imagem em background

function clickImagem(src)
{
  $('.conteudo').empty();
  var el = document.getElementById('conteudo');
  $('#conteudo').css('background',"url('"+src+"') no-repeat center");
  $('#conteudo').css('background-size',"70% 70%");
  $('#conteudo-foot').empty();
}
.conteudo{
  width:320px;
  height:300px;
  border-radius:50%;
  border:0.1px solid #000;
  z-index:5;
  background:#fff;
  margin: 35px auto;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  background-size: 70% 70%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="conteudo" class="conteudo"> </div>
<img src="https://tudocommoda.com/wp-content/uploads/2017/02/colar-de-namorados-cora%C3%A7%C3%A3o-1.jpg"  onclick="clickImagem(this.src)">
</html>

11
  • Neste caso ele ajusta a imagem para dentro do círculo certinho. Mas neste caso eu gostaria de apresentar a imagem (quadricular) inteira dentro da div, tem como fazer desta forma?
    – Sora
    Commented 4/10/2017 às 12:16
  • entendi, já edito Commented 4/10/2017 às 12:29
  • Obrigado @Felipe !!
    – Sora
    Commented 4/10/2017 às 12:29
  • Editado, por nada hehe! Commented 4/10/2017 às 12:46
  • 1
    Perfeito !! Obrigado Felipe
    – Sora
    Commented 4/10/2017 às 13:44

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 .