Як масштабувати зображення в css
У цій статті поділюся способом як масштабувати зображення в css.
Звичайно-ж придуманий цей спосіб не мною - до недавнього часу я навіть не знав про його існування. Але, як писав Олександр Сергійович: «Про скільки нам відкриттів дивних».
Отже, як масштабувати зображення в CSS.
Зазвичай робив таким чином: ставив в стилях ширину у відсотках, а висоту виставляв авто і все.
У цьому випадку ширина зображення займе 100% батьківського блоку, а висота буде пропорційно виставлена автоматично. HTML-код виглядав приблизно так:
І це прекрасно працювало і працює в більшості випадків. Навіть з розрахунком на адаптивний дизайн.
Але ось на днях, завершуючи роботу з перекладу самописного корпоративного сайту на адаптивний дизайн (до речі, як виявилося - захоплююче заняття!), Я зіткнувся з необхідністю виводити кілька зображень товарів в одну лінію і таких ліній-рядків на цілу сторінку. А проблема полягала в тому, що розміри у зображень різні. Кілька тисяч картинок робилися в різні роки різними дизайнерами і за різними стандартами, які періодично мінялися.
І з CSS, на зразок того, що привів вище все це виглядало так:
Погодьтеся - не дуже привабливо. По ширині зображення відмінно вписуються в блок, а ось автоматично виставлена пропорційна висота виходила різною, оскільки різними були вихідні розміри зображень.
Але треба було як то викручуватися і для десктопних пристроїв. І перш за все я кинувся до дизайнерів, але вони підтвердили, що все роблять за стандартом, а старі картинки переробляти вони фізично не зможуть. І без того роботи хоч греблю гати. Поступово, коли-небудь.
Ну не чекати ж дійсно поки вони розгребуть тисячі картинок - це просто нереально. Усвідомивши цю очевидність, я почав шукати рішення. І воно знайшлося!
Ось як тепер виглядає той же блок на сторінці:
Все рівно і красиво. Зображення вписуються повністю пропорційно, як по ширині, так і по висоті.
І при всьому тому, вихідні розміри зображень можуть бути абсолютно різними. Як висота, так і ширина. Це тепер не має ніякого значення.
Ну і якщо ви вже зрозуміли, що я маю на увазі, поговоримо про те, як це зробити.
Як масштабувати зображення в CSS
Якщо пам'ятаєте, в першому випадку зображення розміщувалося за допомогою тега img всередині блоку div.
Тут же підхід зовсім інший. CSS3 дає нам прекрасну можливість використовувати фонове зображення блоку.
Ось як виглядає стиль такого блоку:
Для свого завдання, як легко бачити, я жорстко поставив висоту блоку і визначив фонову картинку. Але найголовніше тут в іншому. Вся фішка полягає у властивості
Можливий ще варіант background-size: cover; В чому різниця? У випадку з cover зображення буде просто обрізано за розміром блоку, а contain пропорційно вписує зображення в блок. І HTML-код такого блоку буде таким:
Це, так би мовити, загальний випадок. Насправді background: url я в стилі не прописував - інакше у мене у всіх блоках була б одна і та ж картинка.
Це властивість я визначав вже в HTML-коді кожного блоку окремо. Приблизно так:
У моєму конкретному випадку картинку я обчислював програмно динамічно для кожного блоку і вставляв за допомогою PHP.
Це реально висмикнута рядок з коду. Але тут все залежить від завдання.
Ось і весь спосіб - він мене здорово виручив. Працюючий сайт, про який я говорив, можна подивитися ось тут: ddwshop.com. Можна зайти в будь-яку групу товарів і побачити дане рішення в дію.
Якщо кому-то такий спосіб стане в нагоді, то користуйтеся на здоров'я. Удачі Вам і до зустрічі.
Матеріали по темі:
Adware, як видалити з комп'ютера
Міняємо сервіс підписки на блог
Smartresponder кинув-вибираємо сервіс email розсилок
Як безкоштовно збільшити обсяг Яндекс Диска
CSS в WordPress - як правильно?
Костянтин, через Файерфокс і працюю ... У мене це виглядає так:
Але за інфу дякую, в понеділок збільшу розмір текстового блоку.
Правда це не те, про що я писав в статті. Ось якраз якщо клікнути по будь-якій з цих груп, то відкриється сторінка, де я і впроваджував показаний код. Наприклад: тут.
Була і така думка, але хто цим буде займатися? Дизайнерка у нас зараз одна і роботи у неї завал, мені теж не до цього - постійно якісь нові функції в програмах треба писати, вся фірма працює на моїй торговій програмі, та й іншого софта написано чимало, все затребуване, необхідно підтримувати, оновлювати ...
Жівосайт на платному тарифі, тут трохи більше можливостей. Хоча довгий час сиділи на безкоштовному - теж нормально, але одночасно може тільки один оператор бути.
Ну начебто підправив все. Сьогодні вночі чергове оновлення вивантажиться. За Жівосайту - там же можна налаштувати спливати чи ні і за яких умов. У нас багато питань буває, по три оператора одночасно сидять ... Але буває, що і затишшя.
Чесно кажучи, я так до кінця і не зрозумів твоєї завдання ... Хіба зображення в статті ти не руками вставляєш? Можна ж просто за куточок потягнути і змінити розмір на будь-який, потрібний тобі. При цьому саме зображення не зміниться, тільки його відображення ...
Дивно, надія, чому Ви не змогли зайти на сайт. Я зараз перейшла нормально по посиланню.
Щодо зображень. Взагалі-то я такі великі зображення не завантажую максимум до 190px. А починаючи з версії 4.5. завантажую через бібліотеку медіафайлів тільки по 1 фото розміром 26-28 px, але все одно вискакує помилка, і вже після наступних оновлень версій мініатюри зображень не з'являються. На хостингу мені відповіли, що "проблема в роботі самої CMS".
Валентина, перейшла на Ваш сайт, так легко відкрився. Мабуть в CMS що - то криється. У мене до цих пір помилка 500 вилазить на блозі - теж помилка при перевстановлення або оновленні сталася. Або при завантаженні іншого шаблону ... Потім розберуся.