Все 3?: Адаптивное изменение размера изображений + ширина реального изображения для маленьких картинок + максимальная ширина для всех больших изображений

Question

Все 3?: Адаптивное изменение размера изображений + ширина реального изображения для маленьких картинок + максимальная ширина для всех больших изображений

17 июл. 2014 г., 13:30:54

Просмотры: 33.4K

Голосов: 0

Я хочу добиться того, чтобы изображения изменяли размер адаптивно – для этого нужно установить 'width: 100%' – и одновременно установить максимальную ширину, чтобы изображение не было таким же широким, как контент

Для этого я использую:

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* чтобы сделать изображение адаптивным */
}

#content img {
    max-width: 690px;
}

Тогда изображение становится адаптивным – но проблема в том, что если ширина изображения меньше 690px, ширина изображения становится слишком большой!

Если я использую только это:

img {
    max-width: 100%;
    height: auto;
}

Размер изображения (ширина и высота) правильные, но изображение не адаптивное.

Как мне достичь всех трех целей?

Адаптивное изменение размера изображения
Ширина реального изображения в случае, если истинная ширина изображения меньше 690px
Ширина 690px для всех больших изображений

Это пример изображения, у которого фактическая ширина меньше 690px, и где видна проблема.

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

Обходной путь заключается в использовании разных CSS для меньших размеров окна. Для больших окон это:

img {
    max-width: 100%;
    height: auto;
    width: auto;         /* Изображение становится адаптивным ниже для меньших окон (@ 800px) */
}

#content img {
    max-width: 690px;
}

А затем для меньших окон:

@media only screen and (max-width: 890px) {
    img {
        width: 90%; /* чтобы сделать изображение адаптивным */
    }
}

user2656065

17

изображения css адаптивный

Комментарии

.container { max-width: 900px; } img { max-width: 100%; min-width: 100%; width: auto; }

gmazzap

17 июл. 2014 г. 15:15:18

Все ответы на вопрос

Из предоставленной вами ссылки CSS-свойства, применяемые к изображению, следующие:

#content img{ max-width:690px;}
img { width:100%;height:auto;}

Поэтому изображения меньшего размера также растягиваются. Обновите ваш ответ следующим образом:

img {
max-width: 100%;
height: auto;
width: auto;        /* чтобы изображение было адаптивным */
 }
#content { max-width:690px;}

Проверьте этот пример

Zammuuz

788

17 июл. 2014 г. 13:34:55

Комментарии

Спасибо за ответ! Разве это не именно то, что я упомянул как своё решение, где "размер изображения правильный, но оно не адаптивно"? Почему у вас это работает, а у меня нет – может, есть какой-то другой аспект моего css, который всё портит..?

user2656065

17 июл. 2014 г. 13:45:29

1) у вас изображения становятся адаптивными, 2) когда реальное изображение больше 690px, оно уменьшается до 690px. Но ваша проблема в том, что меньшие изображения тоже растягиваются до 690px.. я прав?? Поправьте, если ошибаюсь..

Zammuuz

17 июл. 2014 г. 13:48:59

Точно! Когда изображение меньше 690px, оно растягивается до 690px. (Как то, на которое я ссылался.) Я не знаю, как остановить растягивание маленьких изображений до 690px.

user2656065

17 июл. 2014 г. 13:55:22

ок..смотри мой обновленный ответ

Zammuuz

17 июл. 2014 г. 13:59:52

К сожалению, это не работает. Если установить width: auto;, то изображение больше не меняет размер.

user2656065

17 июл. 2014 г. 14:19:27

Показать остальные 1 комментариев

Комментарии

Некоторые комментарии под статьёй указывают на то, что если изображения слишком маленькие, они не будут масштабироваться, и, надеюсь, это решит вашу проблему с сохранением маленьких изображений без растяжения

Bysander

18 июл. 2014 г. 15:06:05

Самый простой способ — оставить ваши стили как есть. Просто ограничьте контейнер с помощью пикселей или процентов.

Например: Если вы ограничите контейнер до размера изображения — ваше изображение будет растягиваться только до этого предела и не дальше.

Если размер вашего изображения 200px — тогда, смотрите ниже итоговый набор стилей.

#content {
    max-width: 200px;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* чтобы изображение стало адаптивным */
}

Подробнее — Создание адаптивных изображений

Спасибо!
Сумеш М.С

Sumesh M.S

1

18 авг. 2014 г. 21:39:05

Я добавлю свои пять копеек, сказав, что я начинающий пользователь WordPress, особенно для своего портфолио. У меня была такая же проблема с адаптивными изображениями, где в HTML/CSS прототипе изображения, например, для работы в портфолио, были размером "1000x650" и масштабировались. Однако в WordPress это не сработало.

Поэтому я погуглил и обнаружил, что оригинальное решение автора этой проблемы действительно сработало для меня.

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* чтобы сделать изображение адаптивным */
}
#content img {
    max-width: 690px;
}

kempes

1

12 янв. 2015 г. 23:30:26

Комментарии

Вы видели (и пробовали) комментарий от @G.M. к исходному вопросу?

kaiser

13 янв. 2015 г. 00:04:31

Bysander 1.22K · Accepted Answer · 2014-07-18T15:03:21Z

CSS

Добавьте следующий код в ваш CSS файл. Это сделает изображения масштабируемыми в зависимости от размера экрана.

Очевидно, измените класс, если хотите применить стили только к определенному классу изображений

img{ max-width: 100%; }

img{ -ms-interpolation-mode: bicubic; }

Затем нужно добавить фильтр, чтобы WordPress автоматически не добавлял размеры к изображениям, которые должны быть адаптивными.

  function remove_wp_width_height($string){
  return preg_replace('/\/i', '',$string);
  }

Теперь, когда вам нужно вывести миниатюру в шаблоне, вместо использования the_post_thumbnail(); используйте новую функцию вот так:

echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),'large'));