как сделать: картинка большая чем див, шасштабируется внутри

Тема в разделе "Верстка", создана пользователем duncan, 11 июн 2013.

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

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    ещё раз
    картинка больше, чем блок, в котором она находится, растягивать его не должна, должна сама подстраиваться под размеры блока
    проблема в том, что она (картинка) не имеет точных размеров (может быть длинная по горизонтали или по вертикали), а блок фиксированной высоты и ширины

    HTML:
    
    <div style="width:200px; height:150px;">
     
    <!-- может быть такая: -->
    <img src="image.png" style="width:300px; height:100px;" alt="" />
     
     
    <!-- или такая: -->
    <img src="image.png" style="width:100px; height:250px;" alt="" />
    </div>
    
     
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.728
    Симпатии:
    2.105
    почитайте и попробуйте варианты, которые описаны
    Перейти по ссылке

    интересный вариант
    Перейти по ссылке
    Cover
     
    duncan нравится это.
  3. NiceBro

    NiceBro Создатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    44
    Симпатии:
    25
    в css для всех изображений
    Код:
    img {
        max-width: 100%;
    }
    или для конкретных
    Код:
    <img src="image.png" style="max-width:100%;" alt="" />
     
  4. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    это именно то, что надо:
    HTML:
    #link {
        border: 1px solid blue;
        display: table-cell;
        height: 100px;
        vertical-align: middle;
        width: 100px;
    }
    #link img {
        border: 1px solid red;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-height: 60px;
        max-width: 60px;
    }
    правда, 6 и 7 ишаки не поддерживают, но это проблемы слоупоков, которые их используют
    не подходит, за край дива вылезет, если длинный прямоугольник
     
    Шумадан нравится это.
  5. NiceBro

    NiceBro Создатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    44
    Симпатии:
    25
    Ну и каким боком оно подстраивается под ширину блока? Ты просто забил для картинок максимальные ширину и высоту в 60px.
    Глянь мое решение Перейти по ссылке
     
  6. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    по той ссылке был отличный вариант, поправил под свои нужды и вышло:
    HTML:
    
    .goods{ border:2px solid #d16600; display: table-cell; height:250px; width:225px; vertical-align:middle;}
    .goods img{ display:block; margin-left:auto; margin-right:auto; max-height:250px; max-width:225px;}
    
    таким образом есть фиксированная высота и ширина блока
    а изображение, независимо от исходного его размера, принудительно подгоняется по высоте или по ширине
    то, что и требовалось
     
    NiceBro нравится это.