نمایش عکس به صورت ماتریسی [بایگانی]

هزاره سوم

چهارشنبه 12 شهریور 1393, 18:55 عصر

سلام
میخواستم بدونم چطور میشه عکس ها رو به صورت ماتریسی در آورد؟؟
مثلا در یک سطر 4تا عکس وجود داشته باشه با 10 تا ستون
برای اینکه بین عکس ها فاصله ایجاد شه از cellspace استفاده کردم ولی اصلا تاثیر نذاشت!!!!

<table cellspacing="10">
<tr>
<td><img src="../public/design/images/UPPI/1.png" /></td>
<td><img src="../public/design/images/UPPI/1.png" /></td>
<td><img src="../public/design/images/UPPI/1.png" /></td>
<td><img src="../public/design/images/UPPI/1.png" /></td>
</tr>

<tr>
<td><img src="../public/design/images/UPPI/1.png" /></td>
<td><img src="../public/design/images/UPPI/1.png" /></td>
<td><img src="../public/design/images/UPPI/1.png" /></td>
<td><img src="../public/design/images/UPPI/1.png" /></td>
</tr>
</table>

ممنون

ABZiko

چهارشنبه 12 شهریور 1393, 19:37 عصر

چجوری توی یک سطر 4 تا عکس باشه و 10 تا ستون؟ مگر همون عکس ها رو هم جز ستون ها در نظر بگیرید. برای فاصله cellspace اون فضای خالی بین سلول های جدول رو مشخص میکنه، می تونید به td پدینگ padding بدین.

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

چهارشنبه 12 شهریور 1393, 19:42 عصر

میخوای یه عکس چند تا بشه؟
یا چند تا عکس رو کنار هم با فاصله بذاری؟

هزاره سوم

چهارشنبه 12 شهریور 1393, 19:52 عصر

ظاهرا بد توضیح دادم :لبخند::اشتباه:
یه جدول میخوام که 4تا ستون و 10 سطر داشته باشه
و بین هر عکس با کناری و بالایی و پایینی.... فاصله باشه
از cellspacing استفاده کردم ولی نشد! از padding هم استفاده کردم نشد!!

ABZiko

چهارشنبه 12 شهریور 1393, 20:11 عصر

خب 10 تا row بزارین وداخلش هر کردوم 4 تا td. این دفعه margin رو امتحان کنید.

هزاره سوم

چهارشنبه 12 شهریور 1393, 20:14 عصر

با این کد درست شد

table
{
border-collapse: separate;
border-spacing: 20px 20px;
border:1px solid #ecf0f1;
}

میشه بگید چطور میتونم عکس ها به اندازه کامل نمایش داده بشه؟ مثلا من خودم یه طول و عرض بدم ولی توی اون طول و عرض عکس کامل نمایش داده بشه

ABZiko

چهارشنبه 12 شهریور 1393, 20:27 عصر

به عکس های width و height صد در صد 100% رو بدین تا تمام تگ والد رو پر کنن.

هزاره سوم

چهارشنبه 12 شهریور 1393, 21:25 عصر

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

qartalonline

پنج شنبه 13 شهریور 1393, 10:08 صبح

برای چیزی که میخواین table نیاز نیست با استفاده div و استایل دادن میتونید این کار رو انجام بدید.

ali@hmadi

پنج شنبه 13 شهریور 1393, 10:26 صبح

www.lenzor.com را نگاه کنید . من قبلا با مهندسی معکوس خودم تونستم سورسش را در بیارم ... اما زیاد پیچیده بود ...

الان گشتم این لینک رو پیدا کردم ...

http://codegeekz.com/jquery-grids

باز بگردید پیدا میکنید

برای گالری

هزاره سوم

پنج شنبه 13 شهریور 1393, 11:12 صبح

دوستان الان مشکل فقط اندازه عکس هست ..

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

background-color:cover

ولی این کد هم کار نکرد
میشه در این مورد هم راهنمایی بفرمایین؟

ali@hmadi

پنج شنبه 13 شهریور 1393, 11:20 صبح

دوستان الان مشکل فقط اندازه عکس هست ..

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

background-color:cover

ولی این کد هم کار نکرد
میشه در این مورد هم راهنمایی بفرمایین؟

آخه نوشتید کالر ...

background-size:cover;

فکر نکنم هر مرورگری ساپورت بکنه ... شما میتوانید اگر اندازه ی همه تصاویر یکسان هستند اصلا سایز ندید و از تگ img مستقیما استفاده کنید ... تا اینکه تصویر را روی تگی دیگر قرار دهید .

Saber Mogaddas

پنج شنبه 13 شهریور 1393, 11:26 صبح

سلام
table سال هاست که منسوخ شده و فقط گاهی مواقع تو قسمت مدیریت تو گرید ها استفاده میشه،پیشنهاد می کنم از div برای این کار استفاده کنید ..
موفق باشید..

persianboy1993

پنج شنبه 13 شهریور 1393, 23:35 عصر

با ul و li ه میتونید گالری بزنید

<div class="wrapper"> <ul id="image-gallery"> <li><img src="image/1.jpg" width="150px;"></li> <li><img src="image/2.png" width="150px;"></li> <li><img src="image/3.jpg" width="150px;"></li> </ul></div>