Процент CSS изображения ведет себя дико

Question

Я надеюсь, что это не конфликт в моих стилях CSS где-то, но на моей странице (http://www.marioplanet.com/product.htm) Я пытаюсь применить правило CSS ко всем изображениям с классом FancyBox, чтобы уменьшить их от 25% от их первоначального размера.

Теперь я слышал, что это может относиться только к ячейке с содержащейся таблицей, поэтому, пожалуйста, сообщите мне, если это так.

Кроме того, если вышеприведенное верно, могу ли я в любом случае сделать это с простым CSS и HTML и без JavaScript?

Спасибо!

Answer 1

К сожалению, width:25%; приведет к ширине, равной четверти размера контейнера, а не к исходному размеру элемента.

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

Answer 2

Если вы укажете ширину в процентах, эта ширина будет рассчитываться в соответствии с шириной родительского элемента, здесь <td/>. Итак, ожидаемый результат вполне ожидаемый .

Теперь, если вы хотите увеличить размер изображения до 25%, у вас есть два способа сделать это:

• Получите ширину на стороне сервера, разделите ее на 4 и установите в HTML. Это простое, но довольно плохое решение (см. Далее).
• Измените размер изображения на стороне сервера , уменьшив его до ¼, затем отправьте изображение с измененным размером.

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

Answer 3

простая ширина: 75%;не достаточно?

.fancybox {ширина: 75%;}