Изменение размера изображения без 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_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

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

	Изменение размера изображения без JavaScript 24.06.2014, 10:19. Показов 2003. Ответов 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