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

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

alleclf

Автор: alleclf,
в DataLife Engine (Общие вопросы)

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

alleclf

alleclf 6

Опубликовано:
Опубликовано:

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

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

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

alex32 944

Опубликовано:
Опубликовано:

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

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

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

alleclf 6

Опубликовано:
Опубликовано: Автор

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

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

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

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

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

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

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

alex32 944

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

alleclf 6

Опубликовано:
Опубликовано: Автор

Таблица с первым блоком в 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, а если точнее любая картинка с сайта.

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

alex32 944

Опубликовано:
Опубликовано:

<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; }

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

alleclf 6

Опубликовано:
Опубликовано: Автор

{image-1} {title}

{text limit="250"}...

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

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

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

alex32 944

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

celsoft 6241

Опубликовано:
Опубликовано:

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

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

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

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

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

Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

Перейти к списку тем
×
×
  • Создать...