Перейти к публикации

Как подогнать картинку под определенный размер


Рекомендованные сообщения

Как можно подогнать картинку под определенный размер блока (див или таблицы неважно). Что бы картинка как-бы вписалась в выделенную область с сохранением пропорций.

Спасибо. Извините что те совсем по теме ДЛЕ, сайт mobine.ru

Ссылка на сообщение
Поделиться на других сайтах

Вы можете это сделать средствами css, указав, например, классу того блока, где распологается картинка .class img {width:размер картинки} ну и так далее.

P.S. А зачем у вас на сайте два <head></head>?

Изменено пользователем alex32
Ссылка на сообщение
Поделиться на других сайтах

Вы можете это сделать средствами css, указав, например, классу того блока, где распологается картинка .class img {width:размер картинки} ну и так далее.

У меня так не получается, в любом случае картинка вылазит из области.

Подробнее: есть область 100х100, и картинки 150х50 и 50х150. Если в ксс указать ширину первая картинка ужмется как надо, а вот вторая вылезет снизу. Если указать высоту, вторая красиво ужимается но первая вылезает вправо. Если указать и ширину и высоту - всё влезает но теряются пропорции.

Вот такие проблемы.

P.S. А зачем у вас на сайте два head?

да без понятия, переделываю постоянно всё вот и запутался окончательно :) У меня там 8,2 стоит, уже доделываю под 9,5 нормально всё будет.

Ссылка на сообщение
Поделиться на других сайтах
Подробнее: есть область 100х100, и картинки 150х50 и 50х150. Если в ксс указать ширину первая картинка ужмется как надо, а вот вторая вылезет снизу. Если указать высоту, вторая красиво ужимается но первая вылезает вправо. Если указать и ширину и высоту - всё влезает но теряются пропорции. Вот такие проблемы.
Слушайте, ну я с вас удивляюсь. Покажите хоть код, мы ж тут не екстрасенсы, за екстрасенсами это на известный телеканал :) Пойди пойми что у вас там вылазит, а что пропадает и почему Изменено пользователем alex32
Ссылка на сообщение
Поделиться на других сайтах

Таблица с первым блоком в 100px - для картинки, второй блок до конца странички:

<table>

<tr>

<td class="customimg"><a href="{full-link}"><img src="{image-1}" width="100px"></a></td>

<td><a href="{full-link}">{title}</a><br>{text limit="250"}...</td>

</tr>

</table>
Стиль из ксс:
.customimg { max-height:100px; height:100px; max-width:100px; width:100px; }[/code]

Ну и для примера две картинки 150х50 и 50х150, а если точнее любая картинка с сайта.

Ссылка на сообщение
Поделиться на других сайтах

.customimg { height:100px; width:100px;overflow:hidden; }

Изменено пользователем alex32
Ссылка на сообщение
Поделиться на других сайтах

.customimg { height:100px; width:100px;overflow:hidden; }

всё-равно картинка вниз вылазит - растягивает таблицу.
Ссылка на сообщение
Поделиться на других сайтах

<table>

<tr>

<td class="customimg"><div><a href="{full-link}"><img src="{image-1}" width="100px"></a></div></td>

<td><a href="{full-link}">{title}</a><br>{text limit="250"}...</td>

</tr>

</table>

.customimg { height:100px; width:100px; }

.customimg div{ height:100px; width:100px;overflow:hidden; }

Ссылка на сообщение
Поделиться на других сайтах

{image-1} {title}

{text limit="250"}...

.customimg { height:100px; width:100px; } .customimg div{ height:100px; width:100px;overflow:hidden; }

так картинка снизу обрезается, а надо ИМЕННО пропорциональное уменьшение

Ссылка на сообщение
Поделиться на других сайтах
так картинка снизу обрезается, а надо ИМЕННО пропорциональное уменьшение
скажите, а каким образом картинка,которая имеет пропорции скажм 2:1 превратится в картинку с пропорциями 2:2 без искажения? Чудес знаете ли не бывает, тут вариант либо обрезать либо картинка будет искажаться, третьего не дано. Или готовьте заранее картинки в том же фотошопе, подгоняя их под размер. Но все равно обрезать придется Изменено пользователем alex32
Ссылка на сообщение
Поделиться на других сайтах

скажите, а каким образом картинка,которая имеет пропорции скажм 2:1 превратится в картинку с пропорциями 2:2 без искажения? Чудес знаете ли не бывает

Однако вы не правы, и это не чудеса, просто параметр auto в указаниях размеров еще никто не отменял. Поэтому стили в данном случае выглядят очень просто

width: auto; height: auto; max-width:100px; max-height:100px;

пропорции будут сохранятся и картинка не будет выходить за пределы ни по высоте, ни по ширине и в зависимости от стороны какая больше будет пропорциональное уменьшение.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...