1 Тема від navchalkin Востаннє редагувалося navchalkin (04.02.2017 19:32:52)

  • navchalkin
  • navchalkin
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 24.12.2014
  • Повідомлень: 176
    • Репутація: 50

Тема: аналог "background-size: cover;" для <img>

Чи є якийсь аналог "background-size: cover;" для тегу <img>? Потрібно зображення масштабувати.
Є стала висота і ширина. Треба щоб зображення вписувалось без стиснень і розтягувань. Зайве обрізалось.

navchalkin вебсайт

2 Відповідь від navchalkin Востаннє редагувалося navchalkin (04.02.2017 20:19:33)

  • navchalkin
  • navchalkin
  • Користувач
  • Поза форумом
  • Звідки: Івано-Франківськ
  • Дата реєстрації: 24.12.2014
  • Повідомлень: 176
    • Репутація: 50

Re: аналог "background-size: cover;" для <img>

Знайшов вирішення. 

object-fit: cover; /*Масштабує зображення без стиснень і розтягувань. Зайве обріже*/

правда працює нормально тільки з горизонтальними зображеннями.
https://pp.сайт-злодій/c604725/v604725937/25660/nKs1Q1V_fUs.jpg
з вертикальними виходить щось таке:
https://pp.сайт-злодій/c604725/v604725937/25669/3t3_GZgepRM.jpg
Щоб виправити це, задаємо повну ширину картинки в пікселях а не відсотках)
Наприклад як у мене: 

.post-header>img {
    border-radius: 7px 7px 0 0;
    width: 852px;
    height: 300px;
    object-fit: cover;
}

Єдина проблема - не буде працювати на старих браузерах(

Подякували: mike1

navchalkin вебсайт

3 Відповідь від iovchynnikov

  • Звідки: Спочивальня Бандери
  • Дата реєстрації: 24.01.2016
  • Повідомлень: 496
    • Репутація: 589

Re: аналог "background-size: cover;" для <img>

Не знаю чи про це Вам йдеться, але я дуже часто користуюся з bootstrap'овського img-responsible:
https://github.com/twbs/bootstrap/blob/ … .css#L1118
http://getbootstrap.com/css/#images

Подякували: 221VOLT, navchalkin2

4 Відповідь від Key Востаннє редагувалося Key (06.02.2017 10:56:44)

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: аналог "background-size: cover;" для <img>

невже для того потрібен класс??? *STOP*
і взагалі бутсрап???  :o

додайте в ресет

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

замість display:block; можна дати vertical-align: middle; це вже принципи або випадки...

https://jsfiddle.net/dssjafcp/

5 Відповідь від iovchynnikov

  • Звідки: Спочивальня Бандери
  • Дата реєстрації: 24.01.2016
  • Повідомлень: 496
    • Репутація: 589

Re: аналог "background-size: cover;" для <img>

Key написав:

невже для того потрібен класс??? *STOP*
і взагалі бутсрап???  :o

додайте в ресет

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

замість display:block; можна дати vertical-align: middle; це вже принципи або випадки...

https://jsfiddle.net/dssjafcp/

Прошу пана... де я сказав що для цього треба "взагалі бутстрап"? Я навіть посилання на код дав для того щоб автор міг подивитися як це вони зробили.
А клас (чи айді) потрібен хоча б для того щоб не застосовувати ці правила для усіх картинок.

Подякували: ostap34PHP1

6 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: аналог "background-size: cover;" для <img>

а чому б і не для всіх?

Подякували: ostap34PHP1