이미지 가운데 맞추기 및 가운데에서 이미지 크기 조정. 여백 없음

사용자의 화면 중앙에 심장 이미지를 배치하고 싶습니다. 그리고 그것을 클릭 할 때마다 크기를 조정하고 키워야합니다.이미지 가운데 맞추기 및 가운데에서 이미지 크기 조정. 여백 없음

주된 문제는 여백없이 그걸하고 싶다는 것입니다. 제발 도와 주실 수 있습니까?

편집 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

지금까지 코드가 있습니까? 그렇다면 질문에 추가하십시오. –

jsfiddle 또는이 작업을 수행하려는 시도가 있습니까? 그냥 CSS/js로 중심에 배치하고 너비와 높이를 늘릴 수는 없습니까? – Sanchit

콘텐츠의 높이를 이전에 알고 있습니까? –

이되지는 display:table, display:table-cell 및 vertical-align:middle 사용 margins를 사용 않는 간단한 코드는이 솔루션의 문제는 뷰의 높이 (당신은 항상 자바 스크립트/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를 통해 애니메이트 할 수 있습니다.

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

이미지 가운데 맞추기 및 가운데에서 이미지 크기 조정. 여백 없음

답변

관련 문제