| |
|
|
| | Вот возник вопрос. Как можно заталкаться картинку в 300х300 окно и что бы она залезла в него, но сохранила пропорции (просто уменьшилась но не вкоем случае не портились пропорции). | |
| |
|
|
| |
|
|
| |
для: TanTaL91
(22.10.2008 в 08:06)
| | | если заведомо известно, что ширина картинки всегда больше высоты или равна ей, то можно обойтись без скрипта, просто присвоить ширину 300px, высота сама подгонится
иначе, юзать скрипт, в котором проверять, что больше, ширина или высота, и бОльшему свойству присваивать те же 300px | |
| |
|
|
| |
|
|
| |
для: mechanic
(22.10.2008 в 08:26)
| | | В чем и загвоздка что всегда разные картинки. То ширина больше то высота... | |
| |
|
|
| |
|
|
| |
для: TanTaL91
(22.10.2008 в 10:18)
| | | этот файл назвать view_picture.html и поместить в ту же папку, где картинки
<style type=text/css><!--
body,img,table,tr,td{margin:0px;padding:0px;border:0px;text-align:center;vertical-align:middle}
--></style>
<body onLoad="if(d.images['i'])adjustWin()" leftmargin=100 topmargin=100 marginwidth=100 marginheight=100>
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
<tr><td><script>
var d=document
resizeTo(400,300)
function adjustWin(){resizeTo(d.images['i'].width+30,d.images['i'].height+47)}
var l=location.search
if(l.length>1){
var imgPath=unescape(location.search.substring(1,location.search.length));
var im=new Image
im.src=imgPath
d.write('<img name=i src="'+imgPath+'">')
}
else {d.write('No picture')}
</script></td></tr></table>
|
в файл с превьюшками вставить эту фунцкию
<script>
function imgWin2(img)
{
var wn=window.open('images/view_picture.html?'+escape(img),'win','resizable,width=400,height=200,screenX=0,screenY=0,top=100,left=100')
wn.focus()
return false
}
</script>
|
и открывать окно, которое будет подгоняться под размер картинки так
onClick="return imgWin2('<?=$image?>')"
|
| |
| |
|
|
| |
|
|
| |
для: TanTaL91
(22.10.2008 в 10:18)
| | | Для того, чтобы картинку, имеющую некую прямоугольную форму (с разными шириной и высотой)
"загнать" в квадрат (имеющий равновеликие стороны) без искажений в пропорциях, эту картинку по-любому
нужно будет по одной стороне обрезать.
Самый простой вариант - обрезка справа или снизу.
Реализуется так:
1. Рисуем <DIV> с жесткими размерами 300х300 и с запретом на скролл.
2. Помещаем в этот <DIV> тег <IMG> с изначальной невидимостью.
3. По окончании загрузки картинки (ONLOAD) определяем - какая из сторон картинки (высота или
ширина) фактически меньше.
4. Меньшую сторону делаем равной 300 пикселей и картинку после этого делаем видимой.
Код будет таким:
<div style="border: 1px solid black; width: 300px; height: 300px; overflow: hidden">
<img src="URL_картинки" style="visibility: hidden"
onload="with (this) {if (offsetHeight < offsetWidth) style.height = '300px'; else style.width = '300px'; style.visibility = 'visible'}"></div>
|
PS. обратите внимание на то, что закрывающий тег </div> должен писаться СЛИТНО с последним
символом тега <img> - чтобы снизу в DIV'e не появлялся зазор.
PS2. бордер у DIV'a (в коде выделен жирно) вполне можете убрать, если он вам не нужен.
Разумеется, возможны и более сложные варианты.
Например, можно тег <IMG> спозиционировать относительно DIV'a и обрезать картинку
равными частями снизу/сверху (или слева/справа). | |
| |
|
|
| |
|
|
| |
для: PAT
(22.10.2008 в 12:05)
| | | картинки бываютне только горизантальными но и вертикальными... | |
| |
|
|
| |
|
|
| |
для: TanTaL91
(23.10.2008 в 07:46)
| | | Вы б сначала проверили код в действии - на любого типа картинках...
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: PAT
(23.10.2008 в 09:46)
| | | Мне полноценая картинка нужна...
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: TanTaL91
(23.10.2008 в 23:12)
| | | Прямоугольную картинку без искажения пропорций вписать в квадрат без обрезания ВПОЛНЕ МОЖНО.
Только вы получите или так (если исходная ширина картинки больше её высоты):
+---------------------------+
| |
| |
| |
| картинка |
| |
| |
| |
| |
+---------------------------+
| |
| пустое место |
| |
+---------------------------+
|
или так (если, наоборот, высота больше ширины)
+---------------------+-----+
| | п |
| | у |
| | с |
| | т |
| | о |
| | е |
| картинка | |
| | м |
| | е |
| | с |
| | т |
| | о |
+---------------------+-----+
|
Я вам предложил вариант, когда ЛЮБАЯ по размеру картинка станет КВАДРАТНОЙ, что вы и запрашивали в исходном своём сообщении. Для этого картинку по МЕНЬШЕЙ стороне нужно довести до 300 пикселей, а лишнее у другой (бОльшей) стороны обрезать.
Вам, нужен вариант, когда ничего не обрезается, а появляется в квадрате пустое место, как и нарисовано выше?
Нет проблем.
В предыдущем коде поменяйте местами offsetWidth и offsetHeight.
И будет вам полное счастье с необрезанными картинками (но с пустыми местами).
[поправлено модератором] | |
| |
|
|
