ورود

View Full Version : حرفه ای: عرض هوشمند عکس



khadem1386
سه شنبه 05 آذر 1392, 12:18 عصر
دوستان و اساتید گرامی سلام
متاسفانه تاپیک قبلی کمی شلوغ شده بود و سوال بنده هم جدید بود و چیز دیگری بود. بنابراین این تاپیک را درست کردم

لطفا به این کد دقت کنید:


<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>responsive</title>
<style>
.cen img, img{
hieght:auto;
display: block;
margin: 0 auto;
border: 0;
max-width: 100%;

}
</style>
</head>
<body><img height="127" width="548" src="_borders/images/bottom.jpg">

<div align="center">

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


این کد به عکس اجازه می دهد اگر عرض Browser از عرض عکس کمتر شد، عرض عکس شروع به کم شدن بنماید. این اتفاق برای عکس اولی می فتد ولی نه برای عکس دوم

سوال بنده دو مورد است.
اول اینکه چرا
max-width: 100%
برروی image دوم اثر نمی کنه. خیلی مقاله و متن html دارم که همه داخل یک table نوشته شده اند و چند عکس ها کنار متن ها قرار دارد. ولی "عرض هوشمند" عکس چون داخل table است max-width: 100% به آن اثر نمی کند
چرا؟

سوال دوم اینکه :
چه بکنیم که
hieght:auto;
برروی عکسها عمل کند؟ و ارتفاع نیز متناسب با عرض عکس کم و زیاد شود.

با تشکر از لطفا شما

mehbod.rayaneh
سه شنبه 05 آذر 1392, 19:03 عصر
درود
از شرطها! یا همون مدیا کوئریها استفاده بنمایید!
اینجوری :

@media only screen and (max-width:1100px) {
.cen img {
width:100%;
height:auto;
}
}

در کد شما برای این ک طول عکس اولی هم زیاد بشه باید مقدار height ک در html گذاشتید را بردارید!
موفق باشید

khadem1386
پنج شنبه 07 آذر 1392, 12:37 عصر
مرسی
از کمک شما