چینش تصاویر کنارهم

[hesamkj 104]

سلام .

برای قسمت محتوای سایتم میخواستم مثل گوگل چینش تصاویر کنارهم باشن. گوگل پلی قبلا تصاویر شاخص پست هاش هر اندازه ای که داشت کنارهم چیده میشد. یه فایل ضمیمه کردم ببینید امیدوارم منظورمو رسونده باشم.

ویرایش شده شهریور 93 توسط hesamkj

[استاد اعظم 900]

شما باید با استفاده از float در css تنظیم کنید

[hesamkj 104]

شما باید با استفاده از float در css تنظیم کنید

امتحان کردم ولی اونجور که میخواستم نشد.

شما باید با استفاده از float در css تنظیم کنید

امتحان کردم ولی اونجور که میخواستم نشد.

[استاد اعظم 900]

1 - شما نباید به همه ی عکس ها یک float بدید

اندازه عکس ها خیلی مهمن ، ارتفاع و پهنا باید تناسبی باشند . مثلا اگر یک عکس بزرگ هست با ارتفاع 100 کنارش باید 2 تا عکس کوچیک با ارتفاع 50 باشد که لبه ها کنار هم باشه

[hesamkj 104]

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

[حاج ایمان 486]

بهترین راهی که به نظرم میرسه استایل دستیه ، بعد از Timthumb استفاده کن که عکسارو Crop کنه ، یه سایز استاندارد بده بهش مثلا به مدیر بگو 400*400 استفاده کنه ، بعد هر عکسی که Crop میشه ست میشه باهاش ، البته یه نظره

[hesamkj 104]

مشکل اینه که عکسها اندازه خاصی ندارند. اگه بشه که مدیر سایت هر سایز عکسی رو بگذاره و فضای خالی نباشه و کنار هم چیده بشن، بهتره. :x

[حاج ایمان 486]

کار زیادی میخواد باید خیلی کار کنی ، اگر سایز مشخصی نداری

[hamid_khaleghi 74]

با سلام

راستش با تگ img فک نکنم بشه چنین کاری کرد... یا اگرم بشه بنده اطلاعی ندارم...

ولی شما به راحتی میتونید با استایل background-size:cover; و اندازه مشخص این کار رو روی تگ هایی مثل div انجام بدید ( اندازه تصویر اصلی مهم نیست )

<style>
#body div {
float:left;
width:150px;
height:150px;
background-size:cover;
} 
</style>
<article id="body">
	 <div style="background:url('آدرس') center no-repeat;"></div>
	 <div style="background:url('آدرس') center no-repeat;"></div>
	 <div style="background:url('آدرس') center no-repeat;"></div>
	 <div style="background:url('آدرس') center no-repeat;"></div>
	 <div style="background:url('آدرس') center no-repeat;"></div>
	 <div style="background:url('آدرس') center no-repeat;"></div>
	 <div style="background:url('آدرس') center no-repeat;"></div>
</article>

[hesamkj 104]

سلام

ممنون ولی اینکه داره ارتفا و پهناشو مشخص میکنه، اندازه سایز مهم نیست یا حداقل 3 یا 4تا سایز مختلف برای مدیر تعریف بشه که تصاویر شاخصتو بین این اندازه ها قرار بده بعد محدودیتی برای ترتیبشون نباشه.

[imanfakhar 26231]

[sharedmedia=tutorials:tutorials:332]

[hesamkj 104]

ممنون استاد فخار مشکلم حل شد.

[hesamkj 104]

شرمنده الان یه مشکل هست که اندازه تصاویر تغییر میکنه (دراز میشه)

[Alireza Xn 1644]

خوب یه آدرس آنلاینی چیزی بذارید بررسی بشه اینطوری که باید با شعبده بازی فهمید مشکل از چیه .

[ashki0076 34]

اگر هم چینی چیزی بخوای باید کلی کار کنی ، الکی که نیست ، گوگل سایز عکس ها رو داره به طور اتوماتیک ست می کنه از بین 10000 تا عکس دوم رو این جا قرار بده که درست باشه

[imanfakhar 26231]

ممنون استاد فخار مشکلم حل شد.

هر عکس را داخل یک دایو بگذارید و از اسکریپت آموزش استفاده کنید