CSS and JScript - Resize image onClick

Question

CSS and JScript - Resize image onClick

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Good afternoon !! Home I'm trying to run the following code however I'm not aware how to resize the image to the size of the div, so it cuts the image and takes only the center :(
Can you help me??

function clickImagem(src)
{
  $('#conteudo').empty();
  var el = document.getElementById('conteudo');
  $(el).css('background',"url('"+src+"') no-repeat center ");
}

  #conteudo{
    height:200px;
    width:200px;
    float:left;
    background-color:#f1f;
  }

<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)">

javascript css

asked by anonymous 26.09.2017 / 19:13

2 answers

1

function clickImagem(src)
{
  $('#conteudo').empty();
  var el = document.getElementById('conteudo');
  $(el).html('<img src="'+src+'">')
}

 #conteudo{
    height:200px;
    width:200px;
    float:left;
    background-color:#f1f;
  }


img{
    width: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
<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)">
</body>
</html>

26.09.2017 / 19:22

As per Javascript variable within an html value? How to close the keyboard?

score 2 · Accepted Answer

Add the parameter cover to background-size

function clickImagem(src)
{
  $('#conteudo').empty();
  var el = document.getElementById('conteudo');
  $(el).css('background',"url('"+src+"') no-repeat center");
  $(el).css('background-size',"cover");
}

  #conteudo{
    height:200px;
    width:200px;
    float:left;
    background-color:#f1f;
  }

<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)">