Содержание

css3 — Как изменить размер картинки в нужном DIV через CSS для мобильной версии?

Задать вопрос

Вопрос задан

Изменён 4 года 9 месяцев назад

Просмотрен 373 раза

Подскажите пожалуйста, как прописать параметры изображения конкретно для одного типа картинок, которые выводятся у меня как обложка к посту?

Я обычно использовал такую вставку прямо в посту

<style>
@media only screen and (min-width : 320px) and (max-width : 480px) {
 img {width: 100%;}
}
</style>

Но, в CSS файл когда я вставляю код:

@media only screen and (max-device-width: 480px) {
    div#single-featured-image-header {
        width: 100%;
    }

Рушиться вся верстка.

Как видно по коду, мне нужны изменения только в div’е : single-featured-image-header

Что я не так делаю? Буду рад помощи…

  • css
  • css3
  • вёрстка
  • адаптивная-верстка

1

Вы похоже забыли закрыть @media

Вместо

@media only screen and (max-device-width: 480px) {
    div#single-featured-image-header {
        width: 100%;
    }

Надо

@media only screen and (max-device-width: 480px) {
    div#single-featured-image-header {
        width: 100%;
    }
}

Основная проблема в моём случае, что нужно было ставить «.», а не #

media only screen and (max-device-width: 480px) {
.single-featured-image-header {
width: 100%;
}
}

Спасибо за активность. Я тут первый раз. Теперь буду знать, куда бежать за помощью )

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как оптимизировать картинки на сайте для мобильных

51406

How-to – Читать 8 минут

Прочитать позже

АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ

Инструкцию одобрил
Руководитель SEO отдела в Mnogoland

Юрий Горбатый

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

Содержание

  1. Что дает сжатие картинок для мобильных устройств
  2. Как проверить скорость загрузки страницы на мобильных устройствах
  3. Как уменьшить картинки для мобильных устройств
  4. Что такое адаптивный дизайн RWD

Заключение

Что дает сжатие картинок для мобильных устройств

Согласно исследованиям HTTP Archive, больше половины веса страницы составляют изображения. Если не уменьшать их размер, пользователю придется дольше ждать полной загрузки страницы. Соответственно большинство покинет страницу еще до ее полноценного отображения. Этот факт негативно сказывается на поведенческих факторах и ранжировании страницы в поиске.

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

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

Как проверить скорость загрузки страницы на мобильных устройствах

Наиболее простой метод — использовать инструмент PageSpeed Insights, разработку от Google. Во вкладке «Мобильные устройства» отображается полноценная информация о скорости загрузки и распределении веса страницы. К тому же сервис указывает, как должна проводиться оптимизация изображений для мобильных устройств на конкретном сайте:

Это готовое руководство к действиям, которое можно использовать по пунктам, начиная с красной зоны.

Найти проблемы со скоростью загрузки для мобильных можно с помощью Аудита сайта Serpstat. Модуль покажет проблемные места и даст рекомендации по устранению неполадок.

Как уменьшить картинки для мобильных устройств

Определите фотографии, фоны, знаки и прочие изображения, которые можно удалить с сайта без потери пользы. Обратите внимание, на каких страницах тяжелые изображения окружают отрывки текста. Удалите их, оптимизируйте либо перенесите в конец страницы.

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

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

Какие форматы изображений используют на сайтах

Сейчас рекомендуется применять новые форматы изображений JPEG 2000, JPEG XR и WebP. Происходит более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG. Новые формы поддерживают не все версии браузеров. Перед тем, как их использовать, нужно сделать проверку.

На разных площадках можно встретить стандартные форматы картинок:

  • JPEG — фотографии, изображения с плавными переходами цветов;
  • GIF — простые логотипы, знаки, графики, диаграммы и анимации;
  • PNG — знаки, логотипы и графики с большим количеством оттенков;
  • SVG — индивидуальные разработки логотипов и картинок в векторном виде.

Все указанные форматы поддаются сжатию при помощи онлайн-инструментов и стационарных программ, а также добавления запросов в HTML-коде сайта.

Способы сокращения веса изображений

Задать размер картинки. При загрузке картинки на страницу вы можете указать количество пикселей, например, 800×600 вместо 1200×800. Но для мобильного устройства это все равно слишком большой размер.

Чтобы уменьшить формат, можно сразу загружать миниатюры картинок с возможностью увеличения до максимального размера при нажатии. Проще всего это сделать через плагины, например, Lightbox для WordPress.

Также можно задать размер картинки в HTML с помощью запроса:

В зависимости от ширины экрана или монитора выполняется вставка HTML картинки с размерами, указанными в коде. Так будет происходить при добавлении каждой картинки на сайт. Альтернативный вариант кода для сайтов с установленными последними версиями CSS:

Но что делать, если все картинки уже загружены, и все переделать вручную физически сложно? Используйте скрипты в таком порядке:

  • сначала необходимо собрать все стили:
  • уменьшить изображения с указанием желаемого размера:
  • сжать и переместить картинки в другую директорию:

Сжать картинки. Это делается вручную при помощи онлайн-инструментов или стационарных компьютерных программ. Например, Optimizilla или TinyPNG. Сжатие картинок для мобильных устройств можно выполнить и через серверные команды:

Для формата JPEG:

  • JpegTran избавляет от метаданных;
  • ImageMagic задает параметр качества для сжатия.

Для формата PNG:

  • PngQuant сжимает картинку через уменьшение количества оттенков. В результате немного ухудшается ее качество;
  • PngCrush сжимает картинку и не влияет на ее качество.

Активировать разработку Google — модуль PageSpeed, который подходит для серверов Apache и Nginx и обладает набором функций для оптимизации картинок. Нужно установить и активировать модуль через команду:

Перейти с библиотеки jQuery на более легкую версию. Например, Zeptojs. Нет смысла использовать старую тяжелую библиотеку, которая дополнительно грузит мобильные браузеры.

Использовать кэширование данных. После создания кэша изображений при каждом следующем обращении к странице браузер будет загружать сохраненные копии картинок без потери времени на загрузку оригиналов.

Отказаться от GIF-анимаций, значительно замедляющих скорость загрузки страницы. Если нужно использовать в тексте микровидео, используйте HTML 5, который поддерживает большинство современных мобильных браузеров.

Создать CSS-спрайты иконок. В обычном формате загрузка каждой иконки означает отдельный запрос к серверу. Создание объединенных спрайтов уменьшает количество запросов к серверу и соответственно сокращает вес страницы. Вот так выглядит пример спрайта:

Что такое адаптивный дизайн RWD

Responsive Web Design представляет собой единую версию сайта с автоматической адаптацией под разные устройства. Это простой дизайн ресурса с гибким размером изображений, который меняется в зависимости от используемого устройства.

RWD избавляет от потребности в создании нескольких версий сайта. По факту адаптивный дизайн полезен только при использовании современных устройств с высоким уровнем производительности.

После настройки RWD картинки автоматом меняют свой формат в пределах экрана. Но вес изображений на сервере остается прежним. Пользователь с мощным устройством и быстрым интернетом разницы не ощутит.

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

Заключение


Оптимизация изображений для мобильных устройств подразумевает:

  • уменьшение формата;
  • сжатие размера;
  • кэширование;
  • объединение иконок в CSS-спрайты.

Если не изменить размер картинки в HTML, вес страницы останется по-прежнему большим. Пользователю придется долго ждать загрузки контента на странице, а поисковая система опустит такой сайт в выдаче.

Для автоматического сжатия картинок используйте онлайн-сервисы и серверные команды. Также можно использовать эффект постепенной загрузки Lazy Load: текст отображается сразу, а картинки подгружаются по мере прокрутки страницы.

Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.

Запустить аудит сайта

Serpstat — набор инструментов для поискового маркетинга!

Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

3. 52 из 5 на основе 24 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы

Рекомендуемые статьи

How-to

Анастасия Сотула

Как распределить семантическое ядро по страницам сайта

How-to

Анастасия Сотула

Как настроить подписку на обновления сайта

How-to

Denys Kondak

Как проверить отображение сайта во всех браузерах

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

html — CSS — как сделать ширину контейнера изображения фиксированной и автоматически растянуть высоту

спросил

10 лет, 2 месяца назад

Изменено 4 года, 6 месяцев назад

Просмотрено 211 тысяч раз

Я сделал такой html-код:

 

    <Имг источник = "...">

И такой код CSS:

 img {
    максимальная ширина: 100%;
    высота: авто;
}
.элемент {
    ширина: 120 пикселей;
    высота: 120 пикселей;
    высота: авто;
    плыть налево;
    поле: 3px;
    отступ: 3px;
}

Что я хотел бы сделать, так это сделать отображение img с использованием ширины div и растянуть его высоту.

Я также хочу, чтобы растяжка div соответствовала img. Это возможно?

  • html
  • css

То, что вы ищете, это min-height и максимальная высота .

 изображение {
    максимальная ширина: 100%;
    высота: авто;
}
.элемент {
    ширина: 120 пикселей;
    минимальная высота: 120 пикселей;
    максимальная высота: авто;
    плыть налево;
    поле: 3px;
    отступ: 3px;
}

0

Нет, вы не можете растянуть img, чтобы он соответствовал div, и одновременно добиться обратного результата. У вас будет бесконечный цикл изменения размера. Однако вы могли бы сделать некоторые заметки из других ответов и реализовать некоторые минимальные и максимальные размеры, но это был не вопрос.

Вам нужно решить, будет ли ваше изображение масштабироваться, чтобы соответствовать его родительскому элементу, или вы хотите, чтобы div расширялся, чтобы соответствовать его дочернему элементу img.

Использование этого блока говорит мне, что вы хотите, чтобы размер изображения был переменным, поэтому родительский элемент div является шириной, до которой масштабируется изображение. height: auto сохранит пропорции вашего изображения. если вы хотите растянуть высоту, она должна быть

100% , как эта скрипка.

 изображение {
    ширина: 100%;
    высота: авто;
}

http://jsfiddle.net/D8uUd/1/

Попробуйте width:inherit чтобы изображение принимало ширину своего контейнера

. Он будет растягиваться/уменьшаться по высоте, чтобы сохранить пропорции. Не устанавливайте высоту в
, она будет соответствовать высоте изображения.

 изображение {
    ширина:наследовать;
}
.элемент {
    граница: 1px сплошной розовый;
    ширина: 120 пикселей;
    плыть налево;
    поле: 3px;
    отступ: 3px;
}

Пример JSFiddle

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Максимальная ширина изображения CSS установлена ​​​​на исходный размер изображения?

спросил

Изменено 3 года, 3 месяца назад

Просмотрено 127 тысяч раз

Ты можешь это сделать? У меня есть пользователи, загружающие изображения в контейнер шириной: 100%, но я не хочу, чтобы изображения были больше их исходного размера.

Большое спасибо!

  • css
  • изображение

2

Только не устанавливайте ширину изображения, только max-width .

 изображение {максимальная ширина: 100%; высота: авто}

( height:auto особо не нужен, так как auto используется по умолчанию, но я поместил его туда как напоминание себе, что я хочу, чтобы изображение имело естественные пропорции.)

В этом фрагменте есть два поля, одно меньше изображения, а другое больше . Как видите, изображение в меньшем поле уменьшено, а изображение в большем поле имеет нормальный размер.

 div {граница:2px начало зеленый; поле: 6px 0}
.box1 {ширина: 100 пикселей; высота: 70 пикселей;}
.box2 {ширина: 200 пикселей; высота: 100 пикселей;}
изображение {максимальная ширина: 100%; высота:авто} 
 <дел>
<дел>

No related posts.