Проблема широких картинок

    Широкая картинка не влезает
    Скриншот при ширине окна браузера в 1024 пикселя



    Это можно исправить. Добавляем CSS:

    .content IMG {max-width: 100%}

    …и voilà!

    Широкая картинка уменьшилась и влезла
    Картинка уменьшилась до нужного размера

    Я надеюсь разработчики Хабра добавят эту строчку в CSS.

    А пока, можно использовать это как UserCSS. Вот версия для Firefox-а и Opera / Safari /IE ≥ 7.

    Как установить UserCSS?

    UPD: нужда в UserCSS отпала. Теперь у всех всё работает и без него!

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 71

      0
      О! Спасибо! Мне тоже уже несколько месяцев не дают покоя обрезанные картинки на хабре. Но я и подумать не мог что это решается так просто.
        0
        немного офтопика: зачем пользователям надо «что то» делать что бы сайт выглядел нормально? Помоему эта задача лежит на плечах разработчиков.
          +2
          Если есть желание и возможность у отдельного юзера, почему бы и не сделать?

          А возьмут ли эту задачу на свои плечи разработчики и если возьмут, то когда — это ещё неизвестно.
            0
            Если есть возможность, это только плюс. Но в данном топике мы говорим о проблеме, которую следует пофиксить разработчикам.

            но это все мое личное мнение
              0
              Ах, это был риторический вопрос…
                –1
                ага, минусуют гады…
                  0
                  а сначала антигады плюсовали :-)
                  было +2
        • UFO just landed and posted this here
            +1
            Если уж использовать expression, то тогда ещё нужно использовать -ms-interpolation-mode: bicubic. А то уменьшаться будет некрасиво.
            • UFO just landed and posted this here
                +1
                Маразматическая реальность технологий.
          • UFO just landed and posted this here
              0
              может кто-то и смотрит. Верстка должна быть всегда крассбраузерная, а кроссбраузерная означает, что сайт должен во всех бразерах отображаться одинаково.
                +2
                А как ваш сайт отображается в Netscape 1.0?

                По-моему Хабр — это как раз тот сайт где про IE6 уже пора забыть.
                  –1
                  некоторые смотрят через maxthon
              0
              Это даже плюс
              • UFO just landed and posted this here
                  0
                  Давайте ещё ориентироваться на, как правильно заметили, Netscape 1.0.

                  И так хватает нормальных браузеров. К тому же Хабром далбоёбы не пользуются (а если и пользуются, то пусть угоняются)
                  • UFO just landed and posted this here
                      0
                      Чтобы глупые юзвери продолжали пользоваться ущербным, навязанным и, по их мнению, безальтернативным продуктом?

                      Думаю, если весь интернет перестанет косить под IE разом, пользователи и поумнеют… Я бы даже сказал, иного варианта, более эффективного, не существует.
                      0
                      судя по вашему коменту всё-таки пользуются…
                0
                великолепно, благодарю ото всей души!
                • UFO just landed and posted this here
                    +7
                    Не все любят разворачивать окно браузера на весь экран.
                      0
                      Не у всех на ноутах больше 1024х768. И это нормально. Никто не будет специально для Хабра обновлять ноут.
                        +2
                        Да умудряются такие картинки вставить что и на домашней 19шке вылазит.
                          0
                          Что за дискриминация? Не каждый (в силу разных причин) может позволить себе большой монитор.
                          0
                          А я для хабра[абра целый стиль по оптимизации прописал, и это там давно есть.
                          Если нужно кому могу скинуть на userstyles.org :)
                            0
                            Что то пунто свитчер шалит…
                            Не хабра[абр, а хабрахабр конечно же :)
                              +1
                              Скиньте. Я посмотрю.
                            0
                            да. момент такой есть
                            решается автором поста, путём контроля размера размещаемых картинок))
                            п.с. я своих постах делаю так
                              0
                              но неплохо бы иметь защиту от «дураков»
                              0
                              CSS всегда спасает… однако если юзать по %…
                                +1
                                можно ли прикрутить user css в chrome?
                                0
                                Эх нам бы на работу таких пользователей, которые сразу решение предлагают, а то пока только в паинте научились на скриншотах рисовать… поубивал бы всех… :)
                                  +2
                                  Спасибо! Правда тут же выявился баг — на изображении с измененным размером появилась <a href=«b23.ru/6vc»">черная полоса. Баг оказался где-то на границе xorg и firefox (у меня 3.0.3), так что пользователям винды и мака можно не беспокоиться. Где точно я не понял — невнимательно читал тикет. Тем не менее, он устраняется добавлением в xorg.conf (секцию «Device») следующей строки:
                                  Option "XaaNoOffscreenPixmaps"
                                  Как это действие скажется на производительности X-сервера — не ясно, но черных полос больше нет.
                                    +2
                                    я бы предложил данные картинки просто скриптом уменьшать до максимального размера, а при клике разворачивать до оринального
                                      +1
                                      Эта проблема наблюдается не только с картинками, но и с кодом.
                                      А вообще, надо правую полосу на Хабре сделать на слой ниже, чтоб контент в случае вылезания за границы перекрывал её, а не наоборот. Ибо он важней этой правой полосы.
                                        0
                                        Так было на старой версии Хабра, но появлялись недовольные и этой ситуацией.
                                          0
                                          Недовольные самим фактом перекрытия? Логично.
                                          А решили проблему, сделав перекрытие ещё менее удобным?
                                          Оригинальное решение.
                                            0
                                            Я такую проблему вообще не решал — было изрядно других. На старой версии правая колонка в коде, кстати, вообще шла первее левой.
                                          0
                                          А дайте-ка пример, где проблема с кодом. Я что-то не видел.
                                          0
                                          а если картинка маленькая?
                                            0
                                            То она не должа увеличиваться.

                                            Как у вас такое получилось? Это IE 8?
                                              0
                                              как вы для ИЕ объясните макс-хейгхт без експрешенов и джаваскриптов?
                                                0
                                                Зачем мне «макс-хейгхт»? Тем более, IE ≥ 7 его понимает.
                                                  0
                                                  не важно какой макс-[что-то], ие6 его не шарит, а ие6 это добрый кусок хабра, пока тоже ;)
                                                  а мира так и подавно :)
                                                    0
                                                    Шестая версия конкретно на Хабре уже не занимает лидирующие позиции. Статистики под рукой нет, пишу по-памяти.
                                                      0
                                                      я не говорил про лидируещие позиции, а про «добрый кусок», процентов 15-20, это всё же много
                                            +2
                                            Никита, спасибо. Передам нашим вебтехнологам.
                                              +2
                                              Спасибо, ваши замечания внесены в код Хабра и будут доступны при следующем апдейте.
                                                0
                                                Круто!
                                                Пожалуйста.
                                                –2
                                                +1 ток что отписал в комменте того же поста, на пост кармы нет :))
                                                  0
                                                  от
                                                  #main-content {

                                                  overflow: hidden
                                                  }
                                                  пользы будет больше

                                                  Да, большие каритики будут обрезаться, но…
                                                  max-width в данном случае не уместен, тем более понимают его не все браузеры — нужны хаки.
                                                    +1
                                                    Замечу, что если у изображения явно указаны размеры, то при превышении его шириной значения max-width оно будет искажено в Firefox (см. баг на Bugzilla).
                                                      0
                                                      У меня в Opera 9.62, Firefox 2.0.0.17, Firefox 3.0.3 и Safari 3.1.2 выглядит одинаково. Где баг?
                                                        0
                                                        Стало быть, уже не только в Firefox. ;-)
                                                          +1
                                                          Что-то у вас, кстати, с цветовым профилем недетское. %)
                                                            0
                                                            Спасибо что сказали. Это проделки фотошопа. Теперь должно быть нормально.
                                                            0
                                                            Просто страница демонстрирует баг кроссбраузерно :-)
                                                        • UFO just landed and posted this here
                                                            0
                                                            «Вот версия для Firefox-а и не для Firefox-а» — как-то нелояльно к Опере написано… или у меня параноя?
                                                              0
                                                              Это не только к Опере. Это ещё Safari и IE ≥ 7. Возможно что-то ещё.
                                                                0
                                                                Можно было бы написать «Версия для Firefox-а, и для остальных браузеров»
                                                              0
                                                              Меня раньше тоже такие картинки напрягали, точнее не сами картинки — как раз их-то хотелось посмотреть, а облако тегов их закрывало (или прямой эфир, не важно). Сегодня купил 22" широкоформатник и, блин, радуюсь жизни)
                                                                0
                                                                excimer.habrahabr.ru/blog/43390/#comment_1075805

                                                                ну как бы было предложено ещё 28 октября и даже ни одного плюса за это не получено.

                                                                Only users with full accounts can post comments. Log in, please.