morfizm (morfizm) wrote,
morfizm
morfizm

Categories:

HTML-трюк для вставки картинок

Вставку больших картинок можно заключать в следующий тег:
<div style="width:100%; overflow-x: scroll; overflow-y: auto;">

</div>

Тогда картинка не будет растягивать френдленту. Вместо этого под ней появится горизонтальная полоса прокрутки, которая будет позволять прокручивать картинку, которая не влезла, или же будет disabled, когда картинка влезла.

Подсмотрел у vtolkov. Его фотографию Ниагарского водопада можно рассмотреть как пример (попробуйте растягивать или сжимать окно обозревателя и увидите, как картинка "сжимается" с возможностью прокрутки).

Конечно, досадно, что в случае если картинка влезла будет отображена ненужная полоса прокрутки. Эту проблему можно частично решить, если поставить overflow-x: auto вместо scroll. Тогда в "хорошем" случае полоса прокрутки не появится, но зато в "плохом" появятся сразу две полосы прокрутки. Вертикальная прокрутка будет нужна для того, чтобы скроллить ту небольшую часть, закрытую автоматически появившейся горизонтальной полосой прокрутки.
Subscribe

  • Дети и инвестирование

    (Хоть и личная тема, пощу в public, чтобы легче было собрать полезный фидбек) Сегодня за прогулкой соединились воедино сразу несколько посылок в…

  • 27" мониторы - 2

    Я тут про мониторы писал. 1. Для юзера allochkag подтверждаю, что "надо брать Делл S2721D за $200 и брать вот этот monitor arm за…

  • Как агрегировать точечную информацию?

    Из всех неприятных вопросов больше всего в жизни я ненавижу вопросы про самочувствие, вроде "насколько сильно у тебя болела рука в этом месяце?".…

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 11 comments

  • Дети и инвестирование

    (Хоть и личная тема, пощу в public, чтобы легче было собрать полезный фидбек) Сегодня за прогулкой соединились воедино сразу несколько посылок в…

  • 27" мониторы - 2

    Я тут про мониторы писал. 1. Для юзера allochkag подтверждаю, что "надо брать Делл S2721D за $200 и брать вот этот monitor arm за…

  • Как агрегировать точечную информацию?

    Из всех неприятных вопросов больше всего в жизни я ненавижу вопросы про самочувствие, вроде "насколько сильно у тебя болела рука в этом месяце?".…