Question

Вставляю на сайт примеры работ "до и после" с помощью juxtaposeJS (https://juxtapose.knightlab.com)

По умолчание в коде для вставки фрейма прописана высота фрейма согласно размерам оригинального изображения.

<p><iframe class="juxtapose" frameborder="0" height="2160" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=65a1674c-d570-11e9-b9b8-0edaf8f81e27" width="90%"></iframe></p>

На страницу помещается с огромными отступами между фреймами. Т.е. если я вставляю на страницу несколько работ, то выглядит это "нечитабельно".

Пытался поменять высоту и ширину фрейма - добавляет полосы прокрутки, что не намного лучше.

По факту мне нужно уменьшить размер фрейма без добавления полос прокрутки, Можно с изменением масштаба содержимого.

Совсем просто: чтобы все влезло на страницу без "зверских" отступов.

Смотрите сами, ка это выглядит сейчас (http://adunajevsky.ucoz.site/index/rabota_s_grafikoj/0-5)

<p>Триангуляция объектов и стиллизованный текст</p>

<p><iframe class="juxtapose" frameborder="0" height="2160" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=65a1674c-d570-11e9-b9b8-0edaf8f81e27" width="90%"></iframe></p>

<p>Базовая портретная ретушь</p>

<p><iframe class="juxtapose" frameborder="0" height="1144" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=e4f106ec-0c93-11ea-b9b8-0edaf8f81e27" width="70%"></iframe></p>

 

 

Answer 1

Можете просто добавить див с фиксированной шириной для мобильных и добавить нижний скрол для дива не задавая скрол для фрейма, в итоге решите проблему. Это более мягкое решение так как другого лучшего нет так как фреймы формируются на стороннем сервисе и вы не имеете к ним доступа чтобы что-то менять и адаптировать под себя.