# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) >  قرار دادن یک عکس لینک دار درست در وسط صفحه

## samangeraphic

سلام دوستان
یه مشکل دارم که واقعا خستم کرده
کلی سایتهای خارجیو ایرانیو رفتم اما به نتیجه دلخواه نرسیدم
من یه عکس دارم که میخوام تو صفحه ورودی سایتم بذارمش
میخوام این عکس هم از لحاظ افقی و هم از لحاظ عمودی بیاد وسط صفحه
یه لینک هم داشته باشه که هر کس رو عکس کلیک کرد بره تو صفحه اصلی سایت
یه سری نمونه CSS  و HTML پیدا کردم اما نشد :گریه: 
لطفا کمک کنین....

----------


## Mori Bone

.a
{
position: fixed;
width: 500px;
height: 400px;
margin: 200px 0 0 250px;
top: 50%;
left: 50%;
}

----------


## cancerr

position absulout ya fix

left:0
top:0;
right:0;
bottom:0;
margin:auto;

اگه ابسولوت بگیری شاید وسط کل سایتتو بگیره.

----------


## samangeraphic

ممنونم ولی من متوجه اینها نمیشم
من مثل شما استاد نیستم :لبخند: 
میشه یه کد کامل قرار بدید و من فقط آدرس عکسو لینکو توش عوض کنم؟
ممنونم از همتون

----------


## دانیال دزفولی

کذ رو بدید تا درست کنم

----------


## samangeraphic

ممنون
من از این کد استفاده میکنم اما این کد فقط عکسو از لحاظ افقی میاره وسط و تو مانیتورهای مختلف امکان داره پایین عکس خالی بمونه
<div align="center"><a href="/fa" target="_self"><img src="intro.jpg" width="70%" height="70%" /></a></div>

----------


## دانیال دزفولی

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="myreset.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
div {
	background:#C36;
	width:70%;
	height:70%;
	position:fixed;
	right:0;
	margin-right:15%;
	top:0;
	margin-top:15%;
}
</style>
</head>

<body>
<div><a href="/fa" target="_self"><img src="intro.jpg" width="70%" height="70%" /></a></div>
</body>
</html>
```

----------


## samangeraphic

ممنون که وقت گذاشتی ولی اینم درست کار نمیکنه
اولا که تصویر وسط نیست و کمی به چپ مایله 
و دوم اینکه تصویر به نسبت سایز کادرم کش میاد
مثل پیتزا کش میاد عکسم :لبخند:

----------


## دانیال دزفولی

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="myreset.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
div {
	background: #C36;
	width: 70%;
	height: 70%;
	position: fixed;
	right: 0;
	margin-right: 15%;
	top: 0;
	margin-top: 15%;
}
div img {
	width: 100%;
	height: auto;
	max-height: 100%
}
</style>
</head>

<body>
<div><a href="/fa" target="_self"><img src="intro.jpg"   /></a></div>
</body>
</html>
```

----------


## samangeraphic

مرسی ولی بازم کش میاد عکس
وسطم نمیمونه 
میچسبه پایین
عکس زیرو ببینید:
fix.JPG

----------


## 2undercover

همونطور که کاربر cancerr گفتند:

http://codepen.io/anon/pen/fIgLp

----------


## refugee

سلام این کد :



```
<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <style>
            .continer {
                width:700px;
                position:absolute;
                margin:-315px -350px;
                top:50%;
                left:50%;
            }
        </style>
    </head>
    
    <body>
        <div class="continer">
            <a href="#"><img src="pic.png" width="700" /></a>
        </div>
    </body>
</html>
```

* توضیحات : برای اینکه عکس لینک شود : از تگ a استفاده میکنیم .  و برای اینکه وسط قرار بگیرد بصورت افقی از تگ margin: 0px auto; استفاده میکنیم . حالا اگه بخواهیم عکس بصورت عمودی هم وسط باشد باید مارجین رو تغییر داد و عکس رو صفر کرد از افقی و عمودی ( یعنی چی ؟ یعنی توسط مارجین ارتفاع و عرض را منفی میکنیم تا وسط مرکز مشخص شود ) و توسط top و left عرض و ارتفاع رو مساوی با 50% میذاریم .

کد رو ببینید اینم نمونه : http://up.vbiran.ir/uploads/0refugee...0313242269.zip

اینم لینک وبساتی که اموزش کامل تر دادن : http://mihanlearn.com/articles/%D9%8...%A8%D8%A7-css/

----------


## samangeraphic

ممنونم
این خیلی خوب بود فقط یه ایراد داره
من اگه بخوام طول و عرض عکسمو 100 درصد بدم چی؟
الان سایز 700 دادی شما
من اگه 100% بدم مخراب میشه

----------


## refugee

> ممنونم
> این خیلی خوب بود فقط یه ایراد داره
> من اگه بخوام طول و عرض عکسمو 100 درصد بدم چی؟
> الان سایز 700 دادی شما
> من اگه 100% بدم مخراب میشه


ببینید وقتی میخواهید وسط قرار بگیره یعنی اندازه کامل کل صفحه نیست . پس بنابر این کوچیکتر از اندازه کل دیوایس است . 
در غیر اینصورت دیگه معنی نمیده وقتی میخواهید 100٪ بذارید . ( ایرادی نداره )

----------


## samangeraphic

حالا 100 درصد نه
70%
من میخوام تو هر سایزی که کادر من هست، عکسم با طول و عرض مثلا 70% تو وسط کادر باشه
من فلش کارم و این کار تو فلش خیلی راحته اما نمیدونم چرا تو html انقدر داستان داره :ناراحت:

----------


## 2undercover

کد ها:

http://codepen.io/anon/pen/fIgLp

الان لوگو گوگل 70 درصد عرض صفحه رو فرا گرفته و وسط صفحه هم هست.

----------


## samangeraphic

نه
لوگوی گوگل 70 درصد نیست
وقتی درصد میدیم یعنی وقتی صفحه رو کوچیک میکنیم، لوگو هم به همون نسبت کوچیک میشه

----------


## 2undercover

> نه
> لوگوی گوگل 70 درصد نیست
> وقتی درصد میدیم یعنی وقتی صفحه رو کوچیک میکنیم، لوگو هم به همون نسبت کوچیک میشه


متوجه منظورتون نمیشم؟!

----------


## samangeraphic

فکر نمیکردم چیز خاصی باشه ولی وقتی سایتهای خارجی رو هم گشتمو چیزی دستگیرم نشد فهمیدم یه همچین مورد ساده ای خیلی سخته پیاده سازیش
دوستان واقعا نمیشه کاری کرد؟ :ناراحت: 
من میخوام کادر اینترنت اکسپلورم تو هر سایزی بود، عکسم هم تو ابعاد مثلا 70% (به نسبت کادرم) تو وسز کادر باشه

----------


## refugee

> فکر نمیکردم چیز خاصی باشه ولی وقتی سایتهای خارجی رو هم گشتمو چیزی دستگیرم نشد فهمیدم یه همچین مورد ساده ای خیلی سخته پیاده سازیش
> دوستان واقعا نمیشه کاری کرد؟
> من میخوام کادر اینترنت اکسپلورم تو هر سایزی بود، عکسم هم تو ابعاد مثلا 70% (به نسبت کادرم) تو وسز کادر باشه


اخه دوست من وقتی شما داری عرض عکس رو 70٪ دیو مادر میذاری یعنی هر چقد اون دیو مادر کوچیک بشه به نسبت کوچیک شدن اون اینم با حفظ 70 درصد خودش کوچیک میشه . 

الان همه چی واضح است نمیدونم شما چرا مشکل دارید .

اشتباه از شماست . بررسی کنید دوباره متوجه خواهید شد

----------


## samangeraphic

ممنون که جواب میدین
خب منم میخوام دقیقا همین اتفاق بیفته
اما این کدهایی که دوستان گذاشتن تو هیچکدوم این اتفاق نمیوفته
تو بعضی هاش هم که عکس همراه کادر کش میاد و دفورمه میشه

----------


## samangeraphic

من یه عکس دارم که میخوام تو صفحه ورودی سایتم بذارمش
میخوام این عکس هم از لحاظ افقی و هم از لحاظ عمودی بیاد وسط صفحه
اما نکته اینجاس که من میخوام واسه سایز عکسم درصد بدم نه عدد
همین
یه لینک هم داشته باشه که هر کس رو عکس کلیک کرد بره تو صفحه اصلی سایت

----------


## samangeraphic

ممنون از شما که این فایلو آماده کردی 
اما این هم مشکل دفورمه شدن عکس رو داره :ناراحت: 
یه همچین کدی رو دوستان تو پست های بالا قرار داده بودن
خودتون اگه اجراش کنید میبینید که عکس داخلش همراه با تغییر سایز کادر، کش میاد یا جمع میشه

----------


## samangeraphic

فرقی نداره چه عکسی باشه
همون عکسی که خودتون استفاده کردید با نام news3.png
شما همونو اگه لطف کنین درست کنین ممنون میشم
من فقط عکسو عوض میکنم

----------


## 130000

بفرمایید فکر کنم دیگه مشکلی وجود نداشته باشه.

http://s5.picofile.com/file/81148021...enter.zip.html

----------


## samangeraphic

واقعا ممنونم که وقت میذارید
با عرض شرمندگی این هم ایرادش اینه که سایز عکس ثابته و با درصد نیست
یعنی کادر اینترنت اکسپلورر من کوچک بشه یا بزرگ، سایز عکسم تغییر نمیکنه  :متفکر:  :ناراحت:

----------


## refugee

> واقعا ممنونم که وقت میذارید
> با عرض شرمندگی این هم ایرادش اینه که سایز عکس ثابته و با درصد نیست
> یعنی کادر اینترنت اکسپلورر من کوچک بشه یا بزرگ، سایز عکسم تغییر نمیکنه


دوست من امکانش است مشکل از طرف شما باشه . ( یا کد ها یا مرورگر یا نحوه اجرا و .. )

نمیشه که این همه ادم درست کنند بگین خرابه ( قطعا اینا تست میکنن بعد میدن دست شما )

----------


## samangeraphic

شما اینو ببینید متوجه میشید
http://www.uploadbaz.com/15yzmmzrnqo0

----------


## refugee

یجای دیگه اپلود کنید . نشد دانلود کنم .

up.vbiran.ir

----------


## samangeraphic

http://up.vbiran.ir/uploads/fix_1467...2849142322.zip

----------


## 2undercover

تا جایی که من می دونم، بهترین نتیجه ای که می تونید با CSS بگیرید این هست:

http://codepen.io/2undercover/pen/raAxv

----------


## samangeraphic

احسنت
دقیقا این همون چیزیه که من میخوام :تشویق: 
چه جوری باید از این کد تو صفحه استفاده کنم؟
میشه خروجی این کدو واسم بذارید

----------


## samangeraphic

> تا جایی که من می دونم، بهترین نتیجه ای که می تونید با CSS بگیرید این هست:
> 
> http://codepen.io/2undercover/pen/raAxv


احسنت
دقیقا این همون چیزیه که من میخوام :تشویق: 
چه جوری باید از این کد تو صفحه استفاده کنم؟
میشه خروجی این کدو واسم بذارید

----------


## 2undercover

```
<!DOCTYPE html><html>
    <head>
        <title>Title</title>
        <style>
            .img {
                            position: absolute;                                                 top: 0;                                                 right: 0;                                                 left: 0;                                                 bottom: 0;                                                 max-width: 70%;                                                 width: auto;                                                 height: auto;                                                 max-height: 100%;                                                 margin: auto;
            }
        </style>
    </head>
    
    <body>
                  <img class="img" src="path/to/image">
    </body> </html>
```

به جای path/to/image آدرس عکس رو بزارید.

----------


## samangeraphic

خیلی خوب بود :تشویق: 
ممنون از همه دوستانی که کمک کردند
موفق باشید :لبخند:

----------


## farshid.kh

ببخشید میشه این کد کاریش کرد حالت بسته شدنم داشته باشه؟

----------


## پیام حیاتی

> ببخشید میشه این کد کاریش کرد حالت بسته شدنم داشته باشه؟


تاریخ پست رو نگاه کردید؟!
تایپیک جدید ایجاد کنید.

----------

