قرار دادن عناصر در مرکز صفحه
سوال جدیدسلام خسته نباشید،
من میخوام وقتی روی یک عکس میرم اون عکس بزرگ بشه
این کار رو با scale انجام دادم،اما یه مشکلی هست،اینکه عکس وقتی بزرگ میشه نصفش از نمایشگر میزنه بیرون و کامل نشون داده نمیشه،من میخوام وقتی که عکس بزرگ شد بیاد وسط صفحه تا کامل دیده بشه،ممنون میشم راهنماییم کنید
ُسلام دوست عزیز
اینجوری که من متوجه شدم میخوای با اومدن موس روی تصویر اون تصویر بزرگ بشه، اگه منظورت از بزرگنمایی اینه که طرف جزئیات تصویر رو ببینه، مثلا تصویر جنس فروشگاه، فک کنم این آموزش ها به دردت بخوره:
لینک دوم دستت بازه که تصویر کجا نمایش داده بشه، اما حالا اگه منظورت این نیست و یه گالری میخوای میتونی از این استفاده کنی:
انشاءالله که کمکت کنه
ببین من یه کد نوشتم برات اجرا بگیر ببین متوجه میشی داستان چیه
<html>
<head>
<title>test</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head><style>
#show{
display:block;
width:200px;
height:200px;
}
.active{
display:block !important;
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
<body>
<img src="http://bedel.ir/wp-content/uploads/2018/04/fu8363.jpg"
onmouseover="hover()" onmouseleave="nohover()" id="show">
<img src="http://bedel.ir/wp-content/uploads/2018/04/fu8363.jpg"
style="display:none;" id="hide">
<script>
function hover(){
$("#hide").addClass("active");
}
function nohover(){
$("#hide").removeClass("active");
}
</script>
</body>
سلام برای بزرگ شدن تصویر دستور scale خوبه اما میتونی از تغییر width و height هم استفاده کنی مثلا دستور زیر رو اجرا بگیر ببین چطوره
<html>
<head>
<title>test</title>
</head>
<style>
img{
display:block;
width:200px;
height:200px;
margin:10px auto;
transition:all ease 1000ms;
}
img:hover{
width:400px;
height:400px;
}
</style>
<body>
<img src="http://bedel.ir/wp-content/uploads/2018/04/fu8363.jpg">
</body>
</html>
عکس رو آپلود کردم،
ببینید عکسهایی که گوشه قرار گرفتن وقتی هاور میشن نصفشون از صفحه میزنه بیرون،من میخوام وقتی عکس ها بزرگ میشن بیان وسط صفحه
ممنون از جوابتون،من روش شما رو هم امتحان کردم باز هم مثل scale هست یعنی موقعی که عکس های کناری بزرگ میشن نصفش معلوم نیست