Как сохранить пропорции высота ширина картинки во всех браузерах?

@kodzero · Регистрация: 30.03.2015

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

Всем приверт!
Зарание, очень благодарен за любые подсказки.))
Вот сама старница, где в таблицу на div вставленны картинки.
http://cuff.ru/eksperimentalnaya-stranica

1) В мозили при растяжении окна пропорции картинок сохраняются
Как сдлеать чтобы они сохранялись в Хроме и Опере, не пойму, подскажите может кто знает?

2) В самом низу каждого ээлемената под фото образовался отступ в виде белой полосы, тоже не могу понять откуда он взялся и как от него избавиться?

Если все эти правила вынести на локальную машину, то отступ исчезает.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.table {
display: table;
padding: 0 0 0 20px;
}
.tr {
display: table-row;
border: 1px solid #4c180b;
color: #4c180b;
}
.td {
display: table-cell;
border: 1px solid #4c180b;
color: #4c180b;
}
.trbottom {
display: table-row;
text-align: center;
color: #4c180b;
}
.tdbottom {
display: table-cell;
color: #4c180b;
}
.textable {
  border: 1px solid #4c180b;
}
.quality
{
  width:100%;
  height:100%;
}

И html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="table">
 <div class="tr">
  <div class="textable"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/poddelka.png" alt="подделка" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/poddelka-forma.jpg" alt="подделка формы" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/poddelka-tolshina.jpg" alt="подделка толщины" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/poddelka-kreplenie.jpg" alt="подделка крепления" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/poddelka-uzor.jpg" alt="подделка узора" /></div>
 </div>
 <div class="tr">
  <div class="textable"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/kachestvo.png" alt="качество" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/kachestvo-forma.jpg" alt="качественная форма" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/kachestvo-tolshina.jpg" alt="качественная толщина" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/kachestvo-kreplenie.jpg" alt="качественное крепление" /></div>
  <div class="td"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/kachestvo-uzor.jpg" alt="качественнай узор" /></div>
 </div>
 <div class="trbottom">
  <div class="tdbottom"></div>
  <div class="tdbottom"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/forma.png" alt="подделка" /></div>
  <div class="tdbottom"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/tolshina.png" alt="подделка" /></div>
  <div class="tdbottom"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/kreplenie.png" alt="подделка" /></div>
  <div class="tdbottom"><img class="quality" src="https://cuffs.r.worldssl.net/wp-content/uploads/2015/04/uzor.png" alt="подделка" /></div>
 </div>
</div>
</div>

@Fedor92 · 17.04.2015, 18:02

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

В мозили при растяжении окна пропорции картинок сохраняются
Как сдлеать чтобы они сохранялись в Хроме и Опере, не пойму, подскажите может кто знает?

Задать фиксированные размеры для класса quality, вместо резиновых... Например

CSS
1
.quality{width:200px; height:300px}

вместо

CSS
1
 .quality{width:100%; height:100%}

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

2) В самом низу каждого ээлемената под фото образовался отступ в виде белой полосы, тоже не могу понять откуда он взялся и как от него избавиться?

Не увидел... Объясните поподробнее...

@Shakalaka · 17.04.2015, 19:29

Не по теме:

А мне разметка нравится)) ЭТА ПЯТЬ!) Называется сделай таблицу дивами)

@kodzero · 17.04.2015, 19:45 **[ТС]**

Огромное спасибо за ответ, но

1) В том-то и дело, что высота и ширина становится фиксированной, а надо чтобы таблица пропорционально уменьшалась и увеличиваться относительно минимальной высоты или ширины родительского дива. Как-то так наверно, думаю понятно объяснил, просто не эксперт в этой области, ну наверно смысл такой
Тоесть, когда мы изменяем размер окна браузера мышкой и таблица должна пропорционально растягиваться или увеличиваться, как это происходит в Мозиле, только нужно во всех браузерах и в хроме и в опере

2) Там внизу под каждой фоткой белая полоска, можете подсказать, как ее убрать?

@Fedor92 · 17.04.2015, 21:36

kodzero, для такого эффекта уберите любые размеры у класса .quality, но тогда у Вас поломается вёрстка... Дело в том, что пока большинство браузеров не позволяют равномерно масштабировать картинки...

Добавлено через 2 минуты
Кстати, я бы использовал для границ блоков border-collapse:collapse...

@kodzero · 17.04.2015, 22:50 **[ТС]**

За калапс спасибо, внес себе на заметку.

Очень жаль...
Тогда только с прикруткой js получается и больше никак?

@Shakalaka · 17.04.2015, 23:13

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

Тогда только с прикруткой js получается и больше никак?

Зачем эти сложности) Не проще ли сделать так
И там даже можно оставить эти извращения с табличными дивами, или дивными таблицами, хз как правильно)

@Fedor92 · 18.04.2015, 10:51

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

Очень жаль...
Тогда только с прикруткой js получается и больше никак?

Ну почему никак? Shakalaka, привёл Вам пример "дива табличного" с использованием фоновых картинок, а не табличных картинок, как таковых... И я соглашаюсь с Shakalaka, что его вариант для Вас оптимальнее будет...

@kodzero · 18.04.2015, 17:57 **[ТС]**

Да, спасибо всем огромное за участие.
По примеру Shakalaka, сделал свою таблицу http://jsfiddle.net/kodzero/nf6vpg8n/71/
Еще огромное спасибо, что показал такой ресурс http://jsfiddle.net - удобная штука.

Добавлено через 3 часа 36 минут
Блин, теперь другая фишка. ((
Если вставляю, какой либо эллемент в таблицу, то все разъезжается, причем в разных браузерах по разному, да и теперь кревее всех наоборот стала мозила )))

http://jsfiddle.net/nf6vpg8n/138/

Кто что может посоветовать, чтобы родительский див(элемент таблицы) не разъезжался, когда в него что-то втавляют?

@Shakalaka · 18.04.2015, 18:17

Конечно он будет разъезжаться его высота задана с помощью padding. Для ячейки position:relative; для дива, который вставляешь в ячейку position:absolute и будет тебе счастье)

@kodzero · 18.04.2015, 19:13 **[ТС]**

Уже ранее пробовал выставлять. В мозиле ячейки все равно разъезжаются.

1) А можно как-то сделать чтобы для мозилы высвечивались другие правила div и CSS, а то там эти ну никак не работают?

2) На самом деле хотелось бы div, который вставляется в таблицу, чтобы тоже был резиновый относительно родительского дива, тоесть получается, как-то так сделал http://jsfiddle.net/kodzero/nf6vpg8n/176/

Вообще спасибо за беседу, очень сильно помогли!

@kodzero · 20.04.2015, 13:53 **[ТС]**

Ну кто нибудь, подскажите чем сможЫте ))))
Я совсем ноль в этих делах, поэтому будут полезны любые зеленые советы, ну только само собой адекватные.

@kodzero · 23.04.2015, 13:58 **[ТС]**

Что решения правда не существует?((((

Добавлено через 12 часов 20 минут
Ладно, если кому-то пригодится - бутсрепом точно можно сделать.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
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, то после закрытия окошка. . .

@Shakalaka
	17.04.2015, 19:29
	Не по теме: А мне разметка нравится)) ЭТА ПЯТЬ!) Называется сделай таблицу дивами) 0

@kodzero 7 / 8 / 0 Регистрация: 30.03.2015 Сообщений: 32
	17.04.2015, 19:45 [ТС]
	Огромное спасибо за ответ, но 1) В том-то и дело, что высота и ширина становится фиксированной, а надо чтобы таблица пропорционально уменьшалась и увеличиваться относительно минимальной высоты или ширины родительского дива. Как-то так наверно, думаю понятно объяснил, просто не эксперт в этой области, ну наверно смысл такой Тоесть, когда мы изменяем размер окна браузера мышкой и таблица должна пропорционально растягиваться или увеличиваться, как это происходит в Мозиле, только нужно во всех браузерах и в хроме и в опере 2) Там внизу под каждой фоткой белая полоска, можете подсказать, как ее убрать? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	17.04.2015, 21:36
	kodzero, для такого эффекта уберите любые размеры у класса .quality, но тогда у Вас поломается вёрстка... Дело в том, что пока большинство браузеров не позволяют равномерно масштабировать картинки... Добавлено через 2 минуты Кстати, я бы использовал для границ блоков border-collapse:collapse... 1

@kodzero 7 / 8 / 0 Регистрация: 30.03.2015 Сообщений: 32
	17.04.2015, 22:50 [ТС]
	За калапс спасибо, внес себе на заметку. Очень жаль... Тогда только с прикруткой js получается и больше никак? 0

@kodzero 7 / 8 / 0 Регистрация: 30.03.2015 Сообщений: 32
	18.04.2015, 17:57 [ТС]
	Да, спасибо всем огромное за участие. По примеру Shakalaka, сделал свою таблицу http://jsfiddle.net/kodzero/nf6vpg8n/71/ Еще огромное спасибо, что показал такой ресурс http://jsfiddle.net - удобная штука. Добавлено через 3 часа 36 минут Блин, теперь другая фишка. (( Если вставляю, какой либо эллемент в таблицу, то все разъезжается, причем в разных браузерах по разному, да и теперь кревее всех наоборот стала мозила ))) http://jsfiddle.net/nf6vpg8n/138/ Кто что может посоветовать, чтобы родительский див(элемент таблицы) не разъезжался, когда в него что-то втавляют? 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	18.04.2015, 18:17
	Конечно он будет разъезжаться его высота задана с помощью padding. Для ячейки position:relative; для дива, который вставляешь в ячейку position:absolute и будет тебе счастье) 1

@kodzero 7 / 8 / 0 Регистрация: 30.03.2015 Сообщений: 32
	18.04.2015, 19:13 [ТС]
	Уже ранее пробовал выставлять. В мозиле ячейки все равно разъезжаются. 1) А можно как-то сделать чтобы для мозилы высвечивались другие правила div и CSS, а то там эти ну никак не работают? 2) На самом деле хотелось бы div, который вставляется в таблицу, чтобы тоже был резиновый относительно родительского дива, тоесть получается, как-то так сделал http://jsfiddle.net/kodzero/nf6vpg8n/176/ Вообще спасибо за беседу, очень сильно помогли! 0

@kodzero 7 / 8 / 0 Регистрация: 30.03.2015 Сообщений: 32
	20.04.2015, 13:53 [ТС]
	Ну кто нибудь, подскажите чем сможЫте )))) Я совсем ноль в этих делах, поэтому будут полезны любые зеленые советы, ну только само собой адекватные. 0

@kodzero 7 / 8 / 0 Регистрация: 30.03.2015 Сообщений: 32
	23.04.2015, 13:58 [ТС]
	Что решения правда не существует?(((( Добавлено через 12 часов 20 минут Ладно, если кому-то пригодится - бутсрепом точно можно сделать. 0

Как сохранить пропорции высота ширина картинки во всех браузерах?

Решение