За последние 24 часа нас посетили 55932 программиста и 1773 робота. Сейчас ищут 2666 программистов ...

Резиновая картинка с полосой прокрутки

Тема в разделе "HTML и CSS", создана пользователем Вячеслав С., 6 май 2012.

  1. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Требуется разместить картинку большую, чтобы она сжималась пропорционально, вот так
    Код (Text):
    1. <img src="_"  width="100%">
    Но так как это карта, сжимать сильно нельзя, иначе ничего не увидишь.

    Можно ли сделать это с полосами прокрутки?
    чтобы работало, как в этом примере, а эффект был, как в верхнем примере, но с полосой прокрутки
    Код (Text):
    1. <div style="overflow: auto; width: 700px; height: 530px; "><img  src="_" a width="1000" height="708" ></div> 
     
  2. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    в чем беда? =)
     
  3. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Как в чем.
    Как сделать с полосой прокрутки?
     
  4. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Не понятно, что хотите: чтобы картинка растягивалась всегда на 100%, но при этом была прокрутка. Как же она появится, если картинка всегда будет на 100% от контейнера? Сделайте тогда 120%, наверное. Такой эффект нужен
    Код (Text):
    1. <div style="overflow:auto;width:50%;height:30%;"><img src="map.jpg" a width="150%" /></div>
    ?
     
  5. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Чтобы сам контейнер растягивался на 100%, а масштаб картинки оставался одинаков
     
  6. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    у контейнера указать overflow: auto
     
  7. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    А картинке указать реальные размеры в пикселях, если хочется масштабировать. Или размеры не указывать.
     
  8. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Вот у меня так и стоит, реальные размеры картинки 1000х708 и ширина контейнера 700
    Т.к. тыкаю, тыкаю, а сделать чтобы ширина контейнера растягивалась на 100% не получается?
     
  9. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Тогда контейнеру нужно указать ширину в 100%. Только картинка будет некрасиво выглядеть в контейнере, если он растянется больше, чем на 1000 пикселей.
     
  10. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Будьте добры, как указать контейнеру 100 % ширину?
     
  11. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Код (Text):
    1. <div style="overflow:auto;width:100%;height:530px;"><img src="_" a width="1000" height="708" ></div>
     
  12. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Только почему-то так не работает.
     
  13. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Скорее всего вы просто не видите прокрутки потому, что контейнер получается больше 1000 пикселей в ширину, больше картинки.
     
  14. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Прокрутку я вижу, 100 % не получается.
    Может, потому, что все в таблице стоит?
    Код (Text):
    1. <table>
    2.     <tr>
    3.       <td width="260" rowspan=2>
    4.           </td>
    5.          <td>
    6.        <table  width="100%">
    7.     <tbody>
    8.         <tr>
    9.           <td>
    10.                    </td>
    11.           <td>
    12.                    </td>
    13.           <td rowspan="2">
    14.                 </td>
    15.         </tr>
    16.         <tr>
    17.           <td>
    18.                     </td>
    19.           <td>
    20.                    </td>
    21.         </tr>
    22.     </tbody>
    23. </table>
    24.                  <div style="overflow: auto; width: 100%; height: 530px; "><img  src="_" a width="1000" height="708" ></div>  
    25.                         </td>    
    26.     </tr>
    27.     <tr>
    28.       <td colspan=3>
    29.               </td>
    30.     </tr>
    31.   </table>
     
  15. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    100% относительно своего контейнера. Если элемент (контейнер к картинке) стоит в ячейке таблицы (другом контейнере), то будет шириной, как у ячейки.
     
  16. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Даже плюнул на ячейки для чистоты, на пустую страницу ставлю эту конструкцию,
    все равно не отдает 100%
    Код (Text):
    1. <div style="overflow: auto; width: 100%; height: 530px; "><img  src="_" a width="1000" height="708" ></div>
     
  17. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Всё равно этот div находится в каком-то контейнере, к которому и подгоняет свою ширину. Можно, ведь, и тегу body указать ширину 500px, тогда и контейнер с картинкой будет не шире 500px.
     
  18. Вячеслав С.

    Вячеслав С. Активный пользователь

    С нами с:
    5 май 2012
    Сообщения:
    13
    Симпатии:
    0
    Да этот div где-то в контейнере . Хорошо, но если на место этого diva я ставлю просто картинку
    Код (Text):
    1. <img src="_"  width="100%">
    то все нормально, а с div не получается