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

Question

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

Navigation

#1 by (4 votes)

5

Good morning !! Home I'm trying to do the following:
I created a function that when clicking on the photo, send the photo to the circ%% circular, the problem is that if the image is bigger than the div, it overlaps everything, I would like to treat it to stay whole, but inside the div as in photo:
(Red current photo untreated) (Blue the desired mode)

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><divid="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 html5 css

asked by anonymous 04.10.2017 / 13:56

1 answer

What is the best way to insert with SQL? Create TEdit Array at run time;

score 4 · Accepted Answer

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><divid="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 link )

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><divid="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 background image

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><divid="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>