Есть желание уменьшать размеры фото браузером в зависимости от разрешения пользователя.
Допустим выводим на странице фото шириной 1024px, и дабы не заставлять пользователя с меньшим разрешением пользоваться горизонатальным скроллингом, применяем следующий прием:
ставим нужным img стиль max-width:100%; height:auto.
Но с этой задачей не справляется IE8, если в теге img заданы width и height.
IE8 вместо пропорционального уменьшения картинки сжимает ее только по горизонтали. Если ширину и высоту img не задавать то масштабирование становится корректным.
Есть ли способ задать стили, чтобы заставить IE8 корректно масштабировать картинку при заданых width и height для стиля max-width:100%?
Примерно как-то так.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>TITLE</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style type="text/css"> .content {width:70%; margin:0 auto; border:1px solid #000;} .content img {max-width:100%; height:auto;} </style> <script type="text/javascript"> function getClientWidth() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth; } function getClientHeight() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight; } function imageSize() { widthBrowser = getClientWidth() -777; heightBrowser = getClientHeight() -520; document.image.width = widthBrowser; document.image.height = heightBrowser; setTimeout('imageSize()', 1); } </script> </head> <body onLoad="imageSize()"> <div class="content"> <img src="makro_07.jpg" name="image" width="777" height="520" alt="" /> </div> </body> </html>Оно?
Работающий пример во вложенном файле
136_img_resizerar.rar
Пожалуй, да, решение с JavaScript самое действенное.
Спасибо за код.
Т.е., насколько я понял, если заданы ширина и высота в аттрибутах, то ИЕ8 не справляется. А если в цсс задать width:auto и height:auto ?
Нет. width:auto ставит полный размер картинки и не масштабирует вообще.
странно.
пацаны на stackoverfow именно советуют width:auto для img. проверил — работает.