Javascript Doubt - Center Image

Question

Javascript Doubt - Center Image

Asked 8 years, 1 month ago

Viewed 622 times

0

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

I thought I’d put a background-position:center; in Javascript, will it work?

	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>
<img src="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>

1

It seems to be exactly the same doubt as this (https://answall.com/q/239062/5878). Can you explain the real difference between the two?

– Woss

2017/09/21 at 12:30
That question was to center a circular div inside a div. This question is to center an image inside the circular div @Anderson

– Sora

2017/09/21 at 12:32

1 answer

Browser other questions tagged javascript css html5

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

by Felipe Duarte • **6,284** points · Answer 1 · 2017-09-21T12:29:59+00:00

lacked the property center

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>
<img src="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>