morfizm (morfizm) wrote,
morfizm
morfizm

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

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

</div>

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

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

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