Как растянуть картинку только по ширине?

Тема в разделе "Верстка", создана пользователем verfaa, 6 ноя 2013.

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

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    374
    Симпатии:
    41
    Есть картинка размером 89х89 px.
    Мне нужно растянуть эту картинку по ширине до 193px, но чтобы высота осталась оригинальной - 89px.

    Пробовал в стилях указывать
    Код:
    width: 193px;
    Но картинка тогда растягивается и по высоте на 193px.

    Пробовал указать
    Код:
    width: 193px; height: 100%;
    Тоже не помогает...

    Сама картинка находится внутри блока div
    Код:
    <div class="span2">
    может с ним как-то поколдовать?

    Подскажите как сделать, может на крайний случай с помощью jquery как-то реализовать?
     
  2. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    107
    width: 193px; height: 89px;
    Так пробовал?

    Картинка как img или фон дива?
     
  3. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    .span2 img {width:193px;}
     
  4. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    374
    Симпатии:
    41
    Перейти по ссылке пробовал
    Перейти по ссылке, забыл написать, там картинок много и они все разной высоты - нужно все растянуть по ширине на 193px, а высота должна уменьшаться пропорционально, так что указать прямо height: 89px не получится

    Картинка как img
     
    Последнее редактирование: 6 ноя 2013
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    тогда так
    .span2 img {min-width:193px;max-width:193px;}
    но если было 89x89 то высота увеличится пропорционально и тоже будет 193px
    а если слишком высокие то прятать остаток картинки в диве
    .span2 {height:89px;overflow:hidden;}
     
  6. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    HTML:
    span img{
        width: inherit; /* наследуем ширину от родительского контейнера */
        height: auto; /* высота задаётся пропорционально */
    }
    ну а шириной уже в самом span задаётся..
     
  7. Agnet

    Agnet Создатель

    Регистр.:
    11 июн 2012
    Сообщения:
    20
    Симпатии:
    4
    .content img {max-width:193px; height:auto;}
    а вообще я советую масштабировать не в пикселах а в %
    например
    .content img {mac-width:216%; height:auto;}
     
  8. n3kask

    n3kask Писатель

    Регистр.:
    23 апр 2012
    Сообщения:
    1
    Симпатии:
    0
    Опечатка :)
     
  9. Jado

    Jado Создатель

    Регистр.:
    21 авг 2012
    Сообщения:
    10
    Симпатии:
    2
    Если картинок много, и они все они разной высоты, то масштабирование всё равно будет кривым, хотя бы вертикали колонки.
    Я бы поступил так, в угоду красоте:
    1. Пакетно перегнать всё под размер в faststone photo resizer.
    2. И задать жёстко размер.
    Но, вариант через css с максимальной шириной, самый подходящий по времени.
     
  10. Wounderer

    Wounderer Создатель

    Регистр.:
    11 янв 2007
    Сообщения:
    21
    Симпатии:
    6
    Ужас какой... На JS не получится ?
    Вариант, с применением jQuery :
    Код:
    $('img.resizeClass').each(function() { $(this).css({width:'100%', height:$(this).height()}); });
    Перейти по ссылке

    Соответственно выполнять после картинок в коде...