Как замостить картинку в DIV не сжимая

Тема в разделе "Верстка", создана пользователем anadikt, 16 ноя 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. anadikt

    anadikt

    Регистр.:
    29 янв 2010
    Сообщения:
    395
    Симпатии:
    62
    Здравствуйте, подскажите, пожалуйста, как можно к примеру картинку большого размера замостить в DIV как фон, но чтобы по высоте она сжалась пропорционально, а по ширине не сжималась и лишние края уходили за DIV невидимыми ... В общем как то так ...

    За ранее благодарен!
     
  2. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    background-size:auto 100% ( http://jsfiddle.net/svwg37qy/ )

    на будущее, если хотите получить быстрый и наглядный ответ, пользуйтесь jsfiddle или показывайте посиента
     
    Последнее редактирование: 16 ноя 2014
    anadikt нравится это.
  3. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    Это только работает в браузерах, которые поддерживают background-size. Как минимум ожидаю проблем на айфонах и айпадах.

    2anadikt, я бы подобрал другое изображение, которое не придется растягивать и ограничился лучше просто background-repeat: repeat-x.
     
  4. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    наверное не зря придумали -webkit-background-size
    хоть бы фидл посмотрели
     
  5. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    смотрел, но у сафари там свои проблемы были с ним, я не про вебкит как движок говорю.
     
  6. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    мобильный сафари имеется ввиду?
     
  7. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    Да
     
  8. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    201
    Симпатии:
    276
    а какие там именно проблемы, никогда не замечал
     
  9. anadikt

    anadikt

    Регистр.:
    29 янв 2010
    Сообщения:
    395
    Симпатии:
    62
    вроде как помогло, буду для кроссбраузерности дальше копать, а то народ пишет что не во всех браузерах это работает ... посиента готового пока нет, он на стадии верстки, это просто задумки, а задумка вот какая:
    в списке новостей самая первая новость оформлена так: большая по ширине картинка допустим 800х400 и на ней заголовок новости, а остальные уже новости размером меньше и в пропорции 4х3 тем самым по ширине картинка должна выходить за края ...
     
  10. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    Я так понял, там хватает:

    http://stackoverflow.com/questions/2860387/ipad-iphone-scale-background-images
    https://www.google.ru/search?q=background-size ios safari&oq=background-size ios &aqs=chrome.1.69i57j0l5.7280j0j7&sourceid=chrome&es_sm=122&ie=UTF-8

    собственно почему написал, у нас в одном из проектов была проблема с айпадами, а их "целевое количество" в списке клиентов было достаточным, чтобы на это нельзя было забить.


    Сложно представить по такому описанию, но думаю кроссбраузерное решение можно сделать чуть более сложной версткой, разделив бэкграунд на 2 части: TOP + BOTTOM, сливающиеся по центру, если центр достаточно однороден.

    Готовьте пациента =)