CSS + Java Script : Treating image larger than a circular div

Asked

Viewed 141 times

4

Good morning !!
Here’s what I’m trying to do:
I created a Function that when clicking on the photo, sends the photo to the circular div conteudo, the problem is that if the image is larger than the div, it overlaps everything, I would like to treat it to be whole but inside the div as in the photo:
(Red current photo without treatment) (Blue the desired mode)
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>


Can you help me please?

javascript css html5

  • You want the image to stay inside the circle, losing the parts that go beyond the circle or you want the square image to stay inside the circle?

  • So I’d like to know how I get the image to stay inside the blue circle

1 answer

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>

With flexbox (see support 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>

With the image in the 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>

  • In this case he adjusts the image inside the right circle. But in this case I would like to present the entire (quadricular) image inside the div, has how to do this way?

  • got it, already edited

  • Thanks @Felipe !!

  • Edited, for nothing hehe!

  • If the Script leaves the image as background the code will also work??

  • Then the method changes, it would have to resize the background and centralize it, but it would be easier, in this case the image would also be easy if it was in an example container a div, as it is alone, centralize it is not an easy task.

  • I can edit my question to present you this question better??

  • Of course, edit with what you want to do.

  • I edited Javascript to leave the image as background

  • Just set the size, edited!

  • 1

    Perfect !! Thank you Felipe

Show 6 more comments

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.