Изменение размера изображения без JavaScript

@ChildOfFlowers · Регистрация: 16.04.2012

Студворк — интернет-сервис помощи студентам

Всем привет.
Накатал я простенькую страничку - слайдшоу. Посередине картинка, по бокам - стрелки вперёд и назад. Верстал при помощи таблицы. Проблема в том, что при уменьшении размера окна картинка не уменьшается вместе с ним, а уходит за границу. Надо, соответственно, сделать нормально. Картинки есть и книжной, и альбомной ориентации. Поэтому прописать картинке атрибут height=100% не получится.
Ну и собственно, главная заморочка: я знаю как решить мою проблему при помощи JavaScript. Но мне не хочется перегружать страницу скриптами. Поэтому я хочу решить проблему только средствами HTML / CSS.
Нашёл в нете вариант с @media max-width, но он мне не совсем подходит, потому что там надо прописывать правило для каждого конкретного разрешения...

@killlfun · 24.06.2014, 12:19

ChildOfFlowers, размеры блока или ячейки таблицы задай в процентах, соответственно размеры буду соблюдаться при разных разрешениях.
А для фотки задай просто max-width:100%; и max-height:100%; тогда фотка просто не будет вылазить за блок или ячейку родителя.

@David777 · 24.06.2014, 17:59

Привет! Попробуй картинку в векторе в формате svg должно масштабировать без проблем!

@ChildOfFlowers · 24.06.2014, 19:51 **[ТС]**

killlfun, не работает.
Вообще фигня какая-то. Прописываю для таблицы и для картинки height=100%, но картинка всё равно не уменьшается, и таблица растягивается под неё, уходя за границу окна.
David777, не вариант. Там будет произвольное количество картинок, никто не будет сохранять картинки в svg перед тем, как загрузить.

@killlfun · 24.06.2014, 19:58

Сообщение от ChildOfFlowers

Вообще фигня какая-то. Прописываю для таблицы и для картинки height=100%, но картинка всё равно не уменьшается, и таблица растягивается под неё, уходя за границу окна.

я написал что для картинки прописывать нужно не height:100%, а max-height:100%.
Так же и с высотой.

@ChildOfFlowers · 24.06.2014, 20:09 **[ТС]**

killlfun, да пробовал конечно. Результат одинаковый.
Более того, если прописать для картинки max-width: 50%, то картинка уменьшится как надо. Но в ячейке таблицы всё равно остаются огромные отступы, как будто зарезервировано место для полноразмерной картинки.

@killlfun · 24.06.2014, 20:17

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

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table width="400" border="1">
  <tr>
    <td style="width:10%; height:10%;"><img src="https://www.cyberforum.ru/images/2.jpg"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

CSS
1
2
3
4
img{
    max-height:100%;
    max-width:100%;
}

Вот пример, все работает.

@ChildOfFlowers · 24.06.2014, 20:21 **[ТС]**

вот мой HTML:

HTML5
1
2
3
4
5
6
7
8
9
<BODY onLoad = "slide()" TOPMARGIN = "0" LEFTMARGIN = "0" RIGHTMARGIN = "0" BOTTOMMARGIN = "0" BACKGROUND = "img\bg.jpg">
<TABLE BORDER = "0" WIDTH = "100%" HEIGHT = "100%" CELLPADDING = "40px">
<TR HEIGHT = "200px"><TD></TD><TD></TD><TD></TD></TR>
<TR><TD WIDTH = "200px"><IMG ID = "prev" SRC = "img\1.jpg" STYLE = "opacity: 0.5" WIDTH = "100%" onClick = "album('back')">
</TD><TD ALIGN = "center"><IMG ID = "current" SRC = "img\2.jpg"><BR><BR><SPAN ID = "description" STYLE = "font-size: 1.2em"></SPAN>
</TD><TD WIDTH = "200px"><IMG ID = "next" SRC = "img\3.jpg" STYLE = "opacity: 0.5" WIDTH = "100%" onClick = "album('fwd')">
</TD></TR>
</TABLE>
</BODY>

Размер нужной ячейки прописать не могу

Добавлено через 2 минуты
...потому что сверху нужно оставить ровно 200px

@killlfun · 24.06.2014, 20:28

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

Добавлено через 6 минут
Твой переделанный код.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<BODY onLoad = "slide()" TOPMARGIN = "0" LEFTMARGIN = "0" RIGHTMARGIN = "0" BOTTOMMARGIN = "0" BACKGROUND = "img\bg.jpg">
<style>
img{
    max-height:100%;
    max-width:100%;
}
</style>
<TABLE BORDER = "0" WIDTH = "100%" HEIGHT = "100%" CELLPADDING = "40px">
<TR HEIGHT = "200px"><TD></TD><TD></TD><TD></TD></TR>
<TR><TD WIDTH = "200px"><IMG ID = "prev" SRC = "img\1.jpg" STYLE = "opacity: 0.5"  onClick = "album('back')">
</TD><TD ALIGN = "center"><IMG ID = "current" SRC = "img\2.jpg"><BR><BR><SPAN ID = "description" STYLE = "font-size: 1.2em"></SPAN>
</TD><TD WIDTH = "200px"><IMG ID = "next" SRC = "img\3.jpg" STYLE = "opacity: 0.5"  onClick = "album('fwd')">
</TD></TR>
</TABLE>
</BODY>

@ChildOfFlowers · 24.06.2014, 20:36 **[ТС]**

killlfun, у меня таблица имеет высоту 100%. В таблице две строки. Для первой строки задана фиксированная высота 200px. Вторая строка всегда должна иметь высоту 100% - 200px. Соответственно, я не могу явно прописать для неё высоту ни в пикселях, ни в процентах. Она должна определяться автоматически. А она, блин, подстраивается под размер изображения...

@killlfun · 24.06.2014, 20:40

ChildOfFlowers, если ты не прописываешь для нее высоту, как она должна определиться?

@ChildOfFlowers · 24.06.2014, 21:02 **[ТС]**

killlfun,

Сообщение от ChildOfFlowers

100% - 200px

раньше прокатывало

@killlfun · 24.06.2014, 21:11

ChildOfFlowers, ну напиши в процентах размер, слайд-шоу должен же какой то размер в процентах иметь.
Напиши 80% или 70% или 60%, подбери сам.
Я же написал перед этим переделал твой код, там все работает. В чем проблема?

@ChildOfFlowers · 24.06.2014, 21:21 **[ТС]**

killlfun, это и дураку понятно, что если явно задать размер в процентах, то он такой и будет. Но у меня - то не тот случай. Проценты сам для всех размеров идеально не подберёшь - либо много пустого места останется, либо всё равно за границу уползёт.

@killlfun · 24.06.2014, 21:37

ChildOfFlowers, но ведь ты же знаешь какие картинки будут использоваться (размеры).
Или если их кто то другой будет туда загружать, то поставь органичения на минимальный размер.

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

@ChildOfFlowers · 24.06.2014, 21:42 **[ТС]**

killlfun,

Я как раз ни в коем случае не хочу, чтобы размер ячейки определялся от картинки. Я, блин, хочу, чтобы размер ячейки определялся из расчёта

Сообщение от ChildOfFlowers

100% - 200px

А вот картинка, да, уже должна зависеть от размеров ячейки.

@killlfun · 24.06.2014, 21:47

ChildOfFlowers, я дал тебе твой рабочий год где картинка зависит от размеров ячейки.
В самом начале не было условия того, что ты задаешь размер ячейки таким выражением "100% - 200px" и оно не работает, или если оно работает так в чем тогда проблема?

Сообщение от ChildOfFlowers

Верстал при помощи таблицы. Проблема в том, что при уменьшении размера окна картинка не уменьшается вместе с ним, а уходит за границу. Надо, соответственно, сделать нормально. Картинки есть и книжной, и альбомной ориентации. Поэтому прописать картинке атрибут height=100% не получится.

Теперь уменьшается, другой задачи я не видел!

Добавлено через 34 секунды
Надеюсь тебе поможет кто то другой.

@ChildOfFlowers · 24.06.2014, 22:10 **[ТС]**

Ну про условие "100%-200px" я написал чуть позже. Я просто не думал, что именно в нём окажется основная загвоздка...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,090

	Изменение размера изображения без JavaScript 24.06.2014, 10:19. Показов 2007. Ответов 17 Метки нет (Все метки) Всем привет. Накатал я простенькую страничку - слайдшоу. Посередине картинка, по бокам - стрелки вперёд и назад. Верстал при помощи таблицы. Проблема в том, что при уменьшении размера окна картинка не уменьшается вместе с ним, а уходит за границу. Надо, соответственно, сделать нормально. Картинки есть и книжной, и альбомной ориентации. Поэтому прописать картинке атрибут height=100% не получится. Ну и собственно, главная заморочка: я знаю как решить мою проблему при помощи JavaScript. Но мне не хочется перегружать страницу скриптами. Поэтому я хочу решить проблему только средствами HTML / CSS. Нашёл в нете вариант с @media max-width, но он мне не совсем подходит, потому что там надо прописывать правило для каждого конкретного разрешения... 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.06.2014, 12:19
	ChildOfFlowers, размеры блока или ячейки таблицы задай в процентах, соответственно размеры буду соблюдаться при разных разрешениях. А для фотки задай просто max-width:100%; и max-height:100%; тогда фотка просто не будет вылазить за блок или ячейку родителя. 0

@David777 0 / 0 / 0 Регистрация: 24.06.2014 Сообщений: 7
	24.06.2014, 17:59
	Привет! Попробуй картинку в векторе в формате svg должно масштабировать без проблем! 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,090
	24.06.2014, 19:51 [ТС]
	killlfun, не работает. Вообще фигня какая-то. Прописываю для таблицы и для картинки height=100%, но картинка всё равно не уменьшается, и таблица растягивается под неё, уходя за границу окна. David777, не вариант. Там будет произвольное количество картинок, никто не будет сохранять картинки в svg перед тем, как загрузить. 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,090
	24.06.2014, 20:09 [ТС]
	killlfun, да пробовал конечно. Результат одинаковый. Более того, если прописать для картинки max-width: 50%, то картинка уменьшится как надо. Но в ячейке таблицы всё равно остаются огромные отступы, как будто зарезервировано место для полноразмерной картинки. 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,090
	24.06.2014, 20:36 [ТС]
	killlfun, у меня таблица имеет высоту 100%. В таблице две строки. Для первой строки задана фиксированная высота 200px. Вторая строка всегда должна иметь высоту 100% - 200px. Соответственно, я не могу явно прописать для неё высоту ни в пикселях, ни в процентах. Она должна определяться автоматически. А она, блин, подстраивается под размер изображения... 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.06.2014, 20:40
	ChildOfFlowers, если ты не прописываешь для нее высоту, как она должна определиться? 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.06.2014, 21:11
	ChildOfFlowers, ну напиши в процентах размер, слайд-шоу должен же какой то размер в процентах иметь. Напиши 80% или 70% или 60%, подбери сам. Я же написал перед этим переделал твой код, там все работает. В чем проблема? 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,090
	24.06.2014, 21:21 [ТС]
	killlfun, это и дураку понятно, что если явно задать размер в процентах, то он такой и будет. Но у меня - то не тот случай. Проценты сам для всех размеров идеально не подберёшь - либо много пустого места останется, либо всё равно за границу уползёт. 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.06.2014, 21:37
	ChildOfFlowers, но ведь ты же знаешь какие картинки будут использоваться (размеры). Или если их кто то другой будет туда загружать, то поставь органичения на минимальный размер. Просто ты хочешь что бы размеры ячейки определялись от картинки, но при уменьшении масштаба картинка (размеры) зависела от размера ячейки. 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,090
	24.06.2014, 22:10 [ТС]
	Ну про условие "100%-200px" я написал чуть позже. Я просто не думал, что именно в нём окажется основная загвоздка... 0