Како центрирати слику помоћу поравнања текста: Центер

Елемент је инлине елемент (приказ вредности inline-block). Може се лако центрирати додавањем text-align: center;својства ЦСС надређеном елементу који га садржи.

Да бисте центрирали слику помоћу, text-align: center;морате да поставите унутрашњост елемента на нивоу блока као што је div. Будући да се text-alignсвојство односи само на елементе на нивоу блока, ставите text-align: center;на омотавајући елемент на нивоу блока да бисте постигли хоризонтално центрирано .

Пример

   Center an Image using text align center  .img-container { text-align: center; } 

Напомена: Надређени елемент мора бити блок елемент. Ако то није елемент блока, требали бисте додатиdisplay: block;својство ЦСС-а заједно саtext-alignсвојством.

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

Демо: Цодепен

Објецт Фит

Једном када је слика центрирана, можда ћете желети да јој промените величину. У object-fitособина одређује колико ан Респондс елемент на ширина / висина је родитељи кутији.

Ово својство се може користити за слике, видео записе или било који други медиј. Такође се може користити са object-positionсвојством да бисте добили већу контролу над приказом медија.

У основи користимо object-fitсвојство да дефинишемо како се истеже или згњечује уграђени медиј.

Синтакса

.element 

Вредности

  • fill: Ово је подразумевана вредност . Промените величину садржаја тако да се подудара са матичним оквиром, без обзира на однос ширине и висине.
  • contain: Промените величину садржаја да бисте попунили надређени оквир користећи исправан однос ширине и висине.
  • cover: слично као containи често обрезивање садржаја.
  • none: приказ слике у изворној величини.
  • scale-down: упоредите разлику између noneи containда бисте пронашли најмању величину конкретног предмета.

Компатибилност прегледача

object-fitЈе подржан од стране већине модерних бровсера, за већину ажуриране информације о компатибилности можете проверити ово //цаниусе.цом/#сеарцх=објецт-фит.

Документација

  • поравнање текста - МДН
  • објект-фит - МДН
  • - МДН