حرفه ای: عرض عکس [بایگانی]

View Full Version : حرفه ای: عرض عکس

khadem1386

یک شنبه 05 آبان 1392, 12:46 عصر

با سلام:
در یک وبسایت حدود 1400 مقاله داریم با پسوند html که دارای عکس های مختلف از tag ب <IMG> استفاده شده و این فایلها از یک فایل css مشترک استفاده می کنند.
همانطور که می دونید امروز خیلی ها دیگه از طریق موبایل و تبلت توی اینترنت می روند. می خواهم کمی سایت خودم را با صفحه نمایش های کوچک تنظیم کنم.

در این پروژهخیلی کار ها را انجام دادم از جمله هوشمند کردن منو و بنر بالای صفحه و خیلی چیزهای دیگر

اما سوال فنی:
می خواهم وقتی که عرض browser کم می شود اگر عرض آن از عرض عکس کمتر بود عکس حالت width:100%
بخودش بگیره و یعنی شروع کنه به کوچکتر شدن و خودش را هم عرض browser کنه

اما اگر عرض browserهنوز بزرگتر از عکس بود ، عکس اندازه اصلی خودش را داشته باشه

دو نکته وجود داره اول این که اندازه عکسها متفاوت است.
دوم اینکه عکسها اکثرا دارای attribute های width و height می باشند.

مثلا:

<img border="0" src="Photos/Men.gif" width="334" height="446" align="left">

با تشکر از کمک شما دوستان

2undercover

دوشنبه 06 آبان 1392, 05:36 صبح

max-width: 100% !important;
height: auto !important;

khadem1386

دوشنبه 06 آبان 1392, 09:07 صبح

این کد من است ولی کار نمی کنه، وقتی عرض browser را کم و زیاد می کنم هرگاه عرض browser کمتر از عکس می شه اندازه عکس تغییری نمی کند و خود را با browser تنظیم نمی کند.

<style>
.img2 {
max-width: 100% !important;
height: auto !important;
}
</style>
<meta name="Microsoft Border" content="trb, default">
</head>

<body>
<div align="center">
<img class="img2" border="0" src="_borders/images/bottom.jpg" width="548" style="height: 127px" ></div>

</body>

2undercover

دوشنبه 06 آبان 1392, 14:09 عصر

من با همین کد ها امتحان کردم و درست جوب داد.

احیانا به اون تگ div اندازه ندادید؟!

khadem1386

سه شنبه 07 آبان 1392, 12:10 عصر

من با همین کد ها امتحان کردم و درست جوب داد.

احیانا به اون تگ div اندازه ندادید؟!
1- نه او div تنها برای وسط چین کردن به کار می ره
2- browser شما چیست. ؟ البته مال بنده firefox می باشد.
3- انتظار از کد: عرض browser را کم کم ، کم می کنیم تا از عرض عکس نیز کمتر بشه ، از این به بعد عکس ناگهان عرض خود را با عرض browser تنظیم کرده و شروع به کوچکتر شدن می کنه
این مسله بالا برای من اتفاق نمی افته. آیا برای شما اتفاق می افته؟

مرسی

qartalonline

سه شنبه 07 آبان 1392, 12:39 عصر

از کد زیر استفاده کنید قطعا جواب میگیرید:

<!DOCTYPE html>
<html>
<head>
<title>responsive</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.center img{
display: block;
margin: 0 auto;
border: 0;
max-width: 100%;
}
</style>
</head>
<body>
<div class="center">
<img src="_borders/images/bottom.jpg" width="548" height="127">
</div>
</body>
</html>

khadem1386

پنج شنبه 09 آبان 1392, 09:14 صبح

سلام مجدد. راه حلهای شما دوستان درست است و درعین حال تشکر
اما می خواهم سوال را کمی حرفه ای تر نمایم . واقعیت این است که بسیاری از img های بنده داخل یک table از نوع width="100%" می باشند. با css چگونه می توان به این مقصود فوق رسید؟
مثال:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>responsive</title>
<style>
.center img, img{
display: block;
margin: 0 auto;
border: 0;
max-width: 100%;
}
</style>
</head>
<body><img height="127" width="548" src="_borders/images/bottom.jpg">

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<div class="center">
<img height="127" width="548" src="_borders/images/bottom.jpg">
</div>
</td>
</tr>
</table>
</body>
</html>

در چین حالتی دیگر سیستم عرض maxwidth:100% کار نمی کنه.
احتمالا باید یک نوع css نیز برای المنت TABLE باید نوشته شود.

با تشکر از حسن توجه شما

khadem1386

دوشنبه 13 آبان 1392, 11:33 صبح

بسیاری از تصاویر به همراه متن داخل یک table است. و بنابراین راه حل های بالا هنوز برای من کار نمی کنه
کسی توانایی حل این مسله را دارد؟

مرسی از کمک شما

khadem1386

سه شنبه 14 آبان 1392, 12:08 عصر

کسی از دوستان کمکی نمی کنه؟

H:Shojaei

سه شنبه 14 آبان 1392, 14:12 عصر

سلام
اين طور كه شما ميگيد اندازه ها مشخص نيست...
پس فقط يه راه داريد اندازه ها رو درصدي بدين كه دوستان گفتن ولي مثالهايي كه زده شده همه يه مشكل دارن...
اين كه اندازه ها تو استايلي كه تو head قرار داره به طور درصدي داده شده ولي تو خود تگ overwrite شده يعني دوباره تو تگ ست شدن كه اين طوري همون اندازه هاي پيكسلي در نظر گرفته ميشه و عكس ثابت ميمنونه حالا اين مثال رو نگاه كنيد:

<body>
<head>
<style>
.img2 {
max-width: 100% !important;
height: auto !important;
}
</style>
<meta name="Microsoft Border" content="trb, default">
</head>

<body>
<div align="center">
<img class="img2" src="1.png" ></div>
</body>

--------------------
و براي محدود كردنش هم ميتونيد از اين مشخصه ها استفاده كنيد:
max-width: 100% !important;
min-width:500px;
max-height:100%;
min-height:500px;
موفق باشيد..

khadem1386

چهارشنبه 15 آبان 1392, 09:16 صبح

با تشکر از پاسخ شما

ببیند راه حلی که دوستان دادند درست است.
منتها وقتی درست عمل می کنه که image
داخل یک tabel نباشه
اگر image داخل table باشه دیگه max widith عمل نمی کنه

می تونید امتحان کنید
این هم کد بنده است

<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>responsive</title> <style> .center img, img{ display: block; margin: 0 auto; border: 0; max-width: 100%; } </style> </head> <body><img height="127" width="548" src="_borders/images/bottom.jpg"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <div class="center"> <img height="127" width="548" src="_borders/images/bottom.jpg"> </div> </td> </tr> </table> </body> </html>

H:Shojaei

چهارشنبه 15 آبان 1392, 11:11 صبح

من حدس ميزنم منظور شما اين باشه:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>responsive</title>
<style>
.center img, img
{ display: block;
margin: 0 auto;
border: 0;
min-width: 100%;
}
</style>
</head>
<body>
<img height="127" src="1.png">
<table border='1' width="100%" cellspacing="0" cellpadding="0" border="0">
<tr> <td> <div class="center">
<img height="127" src="1.png">
</div>
</td> </tr> </table> </body> </html>