Doubt in JScript - Center image

Question

Doubt in JScript - Center image

Navigation

#1 by (1 votes)

0

I have a function that puts images in the background of a circular div. Home I would like to center the image in the center of the circular div as in the following example:

Ithoughtaboutputtingbackground-position:center;inJScript,willitwork?

	function clickImagem(src)
	{
	  $(conteudo).empty() 
	  document.getElementById('conteudo').style.background="url('"+src+"') no-repeat";
	}

	.conteudo-externo{
		width:500px;
		height:500px;
		z-index:3;
		background:#f1f;
		float:left;
	}
	.conteudo{
		width:350px;
		height:350px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#f4f;
		margin: 50px auto;
		}
		.img{
			z-index:1;
			width:130px;
                        height:130px
                        background-position:center;
			opacity:0.5;
		}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Teste</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></head><body><imgsrc="http://www.vannwilliamscustomhomes.com/wp-content/uploads/2013/07/250x250.png" onclick="clickImagem(this.src)">
<div class="conteudo-externo">
  <div class="conteudo" id="conteudo">
   </div>
  </div>

</body>

javascript html5 css

asked by anonymous 21.09.2017 / 14:10

1 answer

Object list for another activity Questions about functions

score 1 · Accepted Answer

The center property

function clickImagem(src)
	{
  $('#conteudo').css('background',"url('"+src+"') no-repeat center");
	}

.conteudo-externo{
		width:500px;
		height:500px;
		z-index:3;
		background:#f1f;
		float:left;
	}
	.conteudo{
		width:350px;
		height:350px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#f4f;
		margin: 50px auto;
    background-position:center;
		}
		.img{
			z-index:1;
			width:130px;
      height:130px;
			opacity:0.5;
		}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Teste</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></head><body><imgsrc="http://www.vannwilliamscustomhomes.com/wp-content/uploads/2013/07/250x250.png" onclick="clickImagem(this.src)">
<div class="conteudo-externo">
  <div class="conteudo" id="conteudo">
   </div>
  </div>

</body>