19.0

CSS object-fit katangian object-fit Kurso na inirerekomenda:

Katangian ay ginagamit upang tiyakin kung paano ayusin ang laki ng <img> o <video> upang magpatugma sa kanyang kahon.

Browser na sumusuporta

Ang numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa katangian. Katangian Chrome IE Firefox Safari
object-fit Opera 31.0 16.0 36.0 7.1

19.0

CSS object-fit katangian object-fit CSS

Ang katangian ay ginagamit upang tiyakin kung paano ayusin ang laki ng <img> o <video> upang magpatugma sa kanyang kahon.

Ang katangian na ito ay nagsasabi kung paano ang nilalaman ay magpupunan ng kahon. Halimbawa, 'mapanatili ang proporsyon ng laki at lapad' o 'paggapak na gumagamit ng napakaraming espasyo'.

Tulip

Makikita ninyo sa ibaba ang imahen ng tulip sa Shanghai Flower Port, na 300x300 pixel:

Tulip

Example

img {
  width: 200px;
  Ngunit, kapag itinatag na 200x300 pixel ang itaas na imahen, magiging ganito ito:
}

Try it yourself

height: 300px;

Nakita namin na ang imahen ay napakakompres upang magpatugma sa 200x300 pixel na kahon, at napahina ang orihinal na proporsyon ng laki at lapad. object-fit: cover;Hindi, kapag gumagamit kami ng:

Kape

Example

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Try it yourself

Isang ibang halimbawa

Dito mayroon kaming dalawang imahen, na gusto naming magpupunan ng 50% ng lapad at 100% ng taas ng window ng browser.

Sa susunod na halimbawa, hindi gumagamit kami ng: object-fitKaya, kapag ayusin namin ang laki ng window ng browser, mapapahina ang proporsyon ng laki at lapad ng imahen:

Example

Try it yourself

Sa susunod na halimbawa, gumagamit kami ng: object-fit: cover;Kaya, kapag ayusin namin ang laki ng window ng browser, mapanatili namin ang proporsyon ng laki at lapad ng imahen:

Example

Try it yourself

Lahat ng halaga ng CSS object-fit.

object-fit Ang katangian ay maaaring tanggapin ang mga sumusunod na halaga:

  • fill - Default na halaga. Ayusina ang laki ng pinalit na nilalaman upang mapanatili ang pinagganap na kahon ng elemento. Kung kinakailangan, magpatagal o magpindot ang bagay upang patugma ang bagay na ito.
  • contain - Izoom ang pinalit na nilalaman upang mapanatili ang proporsyon ng laki at lapad, at ilagay ito sa kahon ng nilalaman ng elemento.
  • cover - Ayusina ang laki ng pinalit na nilalaman upang mapanatili ang proporsyon ng laki at lapad ng pinagganap na kahon ng nilalaman ng elemento. Ang bagay na ito ay mabubunot upang magpatugma.
  • none - Do not adjust the size of the replacement content.
  • scale-down - Adjust the content size as if no content or container content is specified (will result in smaller specific object size)

The following examples demonstrate object-fit All possible values of the property:

Example

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

Try it yourself