img во весь div

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем k31f, 6 сен 2015.

  1. k31f

    k31f

    Регистрация:
    6 сен 2015
    Сообщения:
    2
    Симпатии:
    0
    устал гуглить и решение не найдено

    суть: есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, те может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
    сделать это если картинку пихать из css бекграундом и background-size:cover; - получилось, но надо сделать через img

    зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.

    благодарю и буду рад если поможете.

    добра!
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    А зачем через cover?

    зачем через background?

    Есть пропорции 4/3 и 16/9 или 3/4 и 9/16 (т.е. стандарты фотомыльниц) Если сделать расчет пропорции загружаемой картинки, для div выставить заданную ширину, а для картинки выставить .img{width:100%;} и все.
    --- Добавлено, 6 сен 2015 ---
    Все пропорции нужно выстраивать под выводимую область исходя из первоначально заданных размеров картинки.
     
  3. k31f

    k31f

    Регистрация:
    6 сен 2015
    Сообщения:
    2
    Симпатии:
    0
    Спасибо за ответ. Пропорции не проблема. дело в том что картинка может быть горизонтальной или вертикальной. и в вашем случае будут поля так как картинка не будет заполнять все пространство. надо типа чтобы так было:
    [​IMG]
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Глядя на пример Ваш и примеры в онлайне http://tympanus.net/Development/GammaGallery/
    Все как я и рассказывал идет пересчет исходя из пропорции 4/3 и 16/9 или 3/4 и 9/16

    В примере выше идет в основном пересчет позиционирования картинки на странице. Но ширина подстраивается под выделенную область картинки.

    Сама галерея здесь http://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/
    Если не хотите мучаться качайте и интегрируете в свой макап