居中圖像並從中心調整大小。沒有保證金

我想將心臟圖像放在用戶屏幕的中心。每當我點擊它應該調整和增長。居中圖像並從中心調整大小。沒有保證金

主要問題是，我想這樣做，沒有保證金。你能幫我嗎？

編輯1 - 這是到目前爲止我的代碼，但它是非常的混亂，並使用保證金

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<style> 
#container { 
    width: 100px; 
    height: 100px; 

    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -50px; 
    margin-top: -50px; 
} 

#Msg1 { 
    width: 200px; 
    height: 100px; 
display:none; 
position:absolute; 

    margin-right:55%; 
    margin-top: 45%; 
} 
body { 
    overflow:hidden; 
    background-color:#ffd6d6; 
} 

</style> 
<script> 
var size=100; 
var i=0; 
var heartImage = document.getElementById('container'); 
$(document).ready(function(){ 
    $(function() { 
    $("#Msg1").fadeIn("slow"); 
    }); 
$(function() { 
    $("#container") 
     .mouseover(function() { 
     if(i==0){ 
      var src = $(this).attr("src").match(/[^\.]+/) + "over.png"; 
      $(this).animation 
      $(this).attr("src", src);} 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("over.png", ".png"); 
      $(this).attr("src", src); 
     }); 
}); 
    $("#container").click(function(){ 
    i++; 
    if(i==1) 
    { 
    $("#Msg1").fadeOut("fast"); 
    } 
    if(i==6) 
    { 
    $("body").css("background-color","#9d1b1b"); 
    $("#container").hide(); 
    } 
    size=size*2; 
    $("#container").animate({ 
     height:size, 
     width:size, 
     margin:-size/2, 
    }); 
    }); 

}); 

</script> 
</head> 

<body dir="rtl"> 
<img id="container" src="heart.png" alt="null"/> 
<div id="Msg1"> 
</div> 

</body>

Here處於的jsfiddle代碼。

來源

2013-02-26 Nicodemes

到目前爲止你有任何代碼？如果是這樣，請將其添加到問題中。 – 2013-02-26 14:26:28

會有一個jsfiddle或你試圖做到這一點？你不能只是簡單地用css/js將它放在中心位置並增加寬度和高度嗎？ – Sanchit 2013-02-26 14:26:28

你以前是否知道內容的高度？ – 2013-02-26 14:34:47

這是不使用margins它使用display:table，display:table-cell和vertical-align:middle一個簡單的代碼，這種解決方案的問題是，你需要知道視線的高度（你可以隨時通過JavaScript/jQuery的得到它，但例如，我將它固定在400px中）。

Here is the jsFiddle with the working example.

這是一個簡單的HTML：

<div class="content"> 
    <div class="wrapper"> 
     <div class="inner"> 
      <div class="heart"></div> 
     </div> 
    </div 
</div>

jQuery的 '點擊' 綁定：（現在切換的情況下，只是爲了展示目的）

$(document).ready(function(e) { 
    $(".heart").click(function() { 
     $(this).toggleClass("bigger"); 
    }) 
});

而CSS（我在這裏使用CSS3轉換（與供應商前綴），但你可以通過jQuery來動畫它，使ir跨瀏覽器

body{ 
    height:400px; 
} 
.content{ 
    display:table; 
    height:100%; 
    width:100%; 
} 
.wrapper{ 
    display:table-cell; 
    vertical-align:middle; 
    height:100%; 
} 
.inner{ 
    text-align:center 
} 
.heart{ 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 

    display:inline-block; 
    background: transparent url('http://wbom.files.wordpress.com/2012/02/red-heart.png') center center no-repeat; 
    background-size: 250px; 
    width:250px; 
    height:250px; 
} 
.bigger{ 
    background-size: 350px; 
    width:350px; 
    height:350px; 
}

希望它有幫助，抱歉，如果它太長。
乾杯。

來源

2013-02-26 14:45:09

謝謝！ – Nicodemes 2013-02-26 14:48:07

居中圖像並從中心調整大小。沒有保證金

回答

相關問題