\u0645\u0642\u062f\u0645\u0647<\/p>\n
\u0648\u06cc\u0698\u06af\u06cc object-fit \u062f\u0631 CSS \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u06cc\u0627 \u0648\u06cc\u062f\u06cc\u0648 \u0686\u06af\u0648\u0646\u0647 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u062e\u0648\u062f \u0645\u0642\u06cc\u0627\u0633\u200c\u062f\u0647\u06cc \u0648 \u0628\u0631\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0646\u0633\u0628\u062a \u062a\u0635\u0648\u06cc\u0631 (Aspect Ratio) \u062d\u0641\u0638 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0631\u062e\u0644\u0627\u0641 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0633\u0646\u062a\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u062f\u0631 CSS \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u06a9\u0634\u06cc\u062f\u0647 \u06cc\u0627 \u0641\u0634\u0631\u062f\u0647 \u06a9\u0646\u0646\u062f\u060c object-fit \u06a9\u0646\u062a\u0631\u0644 \u062f\u0642\u06cc\u0642\u06cc \u0631\u0648\u06cc \u0646\u062d\u0648\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062a\u0635\u0648\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f:
\n\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u06a9\u0627\u0645\u0644 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u062c\u0627 \u062f\u0647\u06cc\u062f\u060c \u06a9\u0644 \u0641\u0636\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0647\u06cc\u062f\u060c \u06cc\u0627 \u0628\u062e\u0634 \u062e\u0627\u0635\u06cc \u0627\u0632 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0634 \u062f\u0647\u06cc\u062f.<\/p>\n
object-fit \u0686\u0647 \u0645\u0634\u06a9\u0644\u06cc \u0631\u0627 \u062d\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f<\/p>\n
\u0648\u0642\u062a\u06cc \u0631\u0648\u06cc \u06cc\u06a9 \u062a\u06af <img> \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0634\u062e\u0635\u06cc \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0646\u0633\u0628\u062a \u0627\u0635\u0644\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0645\u06cc\u200c\u06a9\u0634\u062f \u06cc\u0627 \u0641\u0634\u0631\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.
\nobject-fit \u062c\u0644\u0648\u06cc \u0627\u06cc\u0646 \u0627\u0639\u0648\u062c\u0627\u062c \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0645\u062a\u0646\u0627\u0633\u0628 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0628\u0631\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f\u061b \u0645\u0634\u0627\u0628\u0647 \u06a9\u0627\u0631\u06cc \u06a9\u0647 background-size \u0628\u0631\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0631\u0648\u06cc \u062e\u0648\u062f <img>.<\/p>\n
\u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0627\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f<\/p>\n
object-fit \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a:<\/p>\n
\u06a9\u0627\u0631\u062a\u200c\u0647\u0627 (Card Layouts)
\n\u06af\u0627\u0644\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631
\n\u062a\u0635\u0627\u0648\u06cc\u0631 Hero
\n\u0622\u0648\u0627\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646
\nThumbnail\u0647\u0627
\n\u0637\u0631\u0627\u062d\u06cc\u200c\u0647\u0627\u06cc Responsive<\/p>\n
\u0628\u0647\u200c\u062e\u0635\u0648\u0635 \u062f\u0631 Layout\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 CSS Grid \u0648 Flexbox \u06a9\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u062a\u0648\u0633\u0637 Grid \u06cc\u0627 Flex \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0646\u0647 \u0627\u0628\u0639\u0627\u062f \u0637\u0628\u06cc\u0639\u06cc \u062a\u0635\u0648\u06cc\u0631.<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f:<\/p>\n
\u0647\u0631 \u067e\u0646\u062c \u0645\u0642\u062f\u0627\u0631 object-fit
\nfill
\ncover
\ncontain
\nnone
\nscale-down
\n\u062a\u0631\u06a9\u06cc\u0628 \u0622\u0646 \u0628\u0627 object-position
\n\u06a9\u0646\u062a\u0631\u0644 \u062f\u0642\u06cc\u0642 \u0645\u062d\u0644 \u0628\u0631\u0634 \u062a\u0635\u0648\u06cc\u0631
\n\u062a\u0641\u0627\u0648\u062a object-fit \u0648 background-size
\n\u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc
\nobject-fit \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0634\u062e\u0635 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.
\ncover \u06a9\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u067e\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.
\ncontain \u06a9\u0644 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648\u0644\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f.
\nobject-position \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u062f\u0627\u0645 \u0628\u062e\u0634 \u062a\u0635\u0648\u06cc\u0631 \u0647\u0646\u06af\u0627\u0645 \u0628\u0631\u0634 \u062f\u06cc\u062f\u0647 \u0634\u0648\u062f.
\nobject-fit \u0641\u0642\u0637 \u0631\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u200c\u0634\u0648\u0646\u062f\u0647 \u0645\u062b\u0644:
\n<img>
\n<video>
\n<iframe>
\n<embed>
\n\u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.
\n\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628 \u0627\u0633\u062a\u060c \u0648\u0644\u06cc Internet Explorer \u0627\u0632 \u0622\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f.
\n\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0627\u062b\u06cc\u0631\u06cc \u0631\u0648\u06cc \u0633\u0631\u0639\u062a \u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u06cc\u0627 \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644 \u0646\u062f\u0627\u0631\u062f\u061b \u0641\u0642\u0637 \u0646\u062d\u0648\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.
\n\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n
\u0628\u0631\u0627\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u0628\u0647:<\/p>\n
\u0622\u0634\u0646\u0627\u06cc\u06cc \u067e\u0627\u06cc\u0647 \u0628\u0627 CSS
\n\u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f
\n\u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062f\u0631\u0646
\n\u062f\u0631\u06a9 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0628\u0639\u0627\u062f<\/p>\n
object-fit \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0628\u0639\u0627\u062f \u0645\u0634\u062e\u0635 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n
\u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0628\u0639\u0627\u062f
\n1. \u0628\u0627 HTML (\u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u06cc)
\n<img src=”image.jpg” width=”600″ height=”400″ alt=”Description”>
\n2. \u0628\u0627 CSS \u062f\u0627\u062e\u0644\u06cc
\n<img src=”image.jpg” style=”width: 600px; height: 400px;”>
\n3. \u0628\u0627 \u0641\u0627\u06cc\u0644 CSS
\n.image-container img {
\nwidth: 600px;
\nheight: 400px;
\n}
\n\u0686\u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0628\u0639\u0627\u062f \u0645\u0647\u0645 \u0627\u0633\u062a\u061f<\/p>\n
\u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u062f \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0686\u0647 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u062f\u0627\u0631\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0686\u06af\u0648\u0646\u0647 \u0645\u0642\u06cc\u0627\u0633 \u062f\u0627\u062f\u0647 \u06cc\u0627 \u0628\u0631\u0634 \u0628\u062e\u0648\u0631\u062f.<\/p>\n
\u0627\u06af\u0631 \u0641\u0642\u0637 width \u0645\u0634\u062e\u0635 \u0634\u0648\u062f \u0648 height \u0631\u0648\u06cc auto \u0628\u0627\u0634\u062f\u060c \u062a\u0635\u0648\u06cc\u0631 \u0646\u0633\u0628\u062a \u0637\u0628\u06cc\u0639\u06cc \u062e\u0648\u062f \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 object-fit \u0639\u0645\u0644\u0627\u064b \u0628\u06cc\u200c\u0627\u062b\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634<\/p>\n
\u0647\u0645\u06cc\u0634\u0647 width \u0648 height \u0631\u0627 \u062f\u0631 HTML \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 Cumulative Layout Shift (CLS) \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n
\u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u062f\u0648\u0646 object-fit<\/p>\n
\u0627\u06af\u0631 \u0646\u0633\u0628\u062a \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0646\u0633\u0628\u062a \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u06cc\u06a9\u06cc \u0646\u0628\u0627\u0634\u062f\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0645\u06cc\u200c\u06a9\u0634\u062f \u06cc\u0627 \u0641\u0634\u0631\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\u0645\u062b\u0644\u0627\u064b:<\/p>\n
<img
\nsrc=”image.jpg”
\nstyle=”width: 300px; height: 337px;”
\n><\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u062a\u0635\u0648\u06cc\u0631 \u0641\u0634\u0631\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0638\u0627\u0647\u0631 \u0622\u0646 \u062e\u0631\u0627\u0628 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 object-fit: fill
\nimg {
\nobject-fit: fill;
\n}<\/p>\n
\u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u0633\u062a \u0648 \u0646\u0633\u0628\u062a \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062d\u0641\u0638 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\u06a9\u0627\u0631\u0628\u0631\u062f<\/p>\n
\u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0628\u0647\u200c\u0646\u062f\u0631\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u061b \u0645\u06af\u0631 \u0628\u0631\u0627\u06cc \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062e\u0627\u0635.<\/p>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 object-fit: cover
\nimg {
\nobject-fit: cover;
\n}<\/p>\n
\u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631:<\/p>\n
\u0646\u0633\u0628\u062a \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc\u200c\u06a9\u0646\u062f
\n\u06a9\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u067e\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f
\n\u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0628\u0631\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f
\n\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627
\n\u062a\u0635\u0627\u0648\u06cc\u0631 Hero
\n\u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a
\nThumbnail\u0647\u0627
\n\u0622\u0648\u0627\u062a\u0627\u0631\u0647\u0627
\n\u0645\u062b\u0627\u0644
\n.card-image {
\nwidth: 300px;
\nheight: 200px;
\nobject-fit: cover;
\n}
\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 object-fit: contain
\nimg {
\nobject-fit: contain;
\n}<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a:<\/p>\n
\u06a9\u0644 \u062a\u0635\u0648\u06cc\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f
\n\u0686\u06cc\u0632\u06cc \u0628\u0631\u0634 \u0646\u0645\u06cc\u200c\u062e\u0648\u0631\u062f
\n\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0627\u0637\u0631\u0627\u0641 \u062a\u0635\u0648\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f
\n\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627
\n\u0644\u0648\u06af\u0648\u0647\u0627
\n\u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644
\n\u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627
\n\u062a\u0635\u0627\u0648\u06cc\u0631 \u0622\u0645\u0648\u0632\u0634\u06cc
\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 object-fit: none
\nimg {
\nobject-fit: none;
\n}<\/p>\n
\u062a\u0635\u0648\u06cc\u0631 \u062f\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0627\u0635\u0644\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0627\u06af\u0631 \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0632 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0628\u0627\u0634\u062f\u060c \u0628\u0631\u0634 \u0645\u06cc\u200c\u062e\u0648\u0631\u062f.<\/p>\n
\u06a9\u0627\u0631\u0628\u0631\u062f<\/p>\n
\u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc\u200c\u0647\u0627\u06cc Pixel-perfect \u06cc\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0628\u062e\u0634 \u062e\u0627\u0635\u06cc \u0627\u0632 \u062a\u0635\u0648\u06cc\u0631.<\/p>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 object-fit: scale-down
\nimg {
\nobject-fit: scale-down;
\n}<\/p>\n
\u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u06cc\u0646 contain \u0648 none \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0647\u0631\u06a9\u062f\u0627\u0645 \u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631\u06cc \u0628\u062f\u0647\u062f.<\/p>\n
\u06a9\u0627\u0631\u0628\u0631\u062f<\/p>\n
\u0648\u0642\u062a\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u062f\u0627\u0631\u0646\u062f \u0648 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0648\u0686\u06a9 \u0628\u0632\u0631\u06af \u0634\u0648\u0646\u062f.<\/p>\n
\u06a9\u0646\u062a\u0631\u0644 \u0645\u062d\u0644 \u0628\u0631\u0634 \u0628\u0627 object-position<\/p>\n
\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u062f\u0627\u0645 \u0628\u062e\u0634 \u062a\u0635\u0648\u06cc\u0631 \u062f\u06cc\u062f\u0647 \u0634\u0648\u062f.<\/p>\n
\u0645\u062b\u0627\u0644
\nimg {
\nobject-fit: cover;
\nobject-position: center top;
\n}
\n\u0645\u0642\u0627\u062f\u06cc\u0631 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647
\n\u06a9\u0644\u06cc\u062f\u06cc
\ntop
\nbottom
\nleft
\nright
\ncenter
\n\u062f\u0631\u0635\u062f\u06cc
\nobject-position: 20% 80%;
\n\u067e\u06cc\u06a9\u0633\u0644\u06cc
\nobject-position: 10px 20px;
\n\u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc
\n1. \u0622\u0648\u0627\u062a\u0627\u0631 \u062f\u0627\u06cc\u0631\u0647\u200c\u0627\u06cc
\n.avatar {
\nwidth: 80px;
\nheight: 80px;
\nobject-fit: cover;
\nobject-position: center top;
\nborder-radius: 50%;
\n}
\n2. \u06af\u0627\u0644\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631
\n.gallery img {
\nwidth: 100%;
\nheight: 250px;
\nobject-fit: cover;
\n}
\n3. \u062a\u0635\u0648\u06cc\u0631 Hero
\n.hero-image {
\nwidth: 100%;
\nheight: 60vh;
\nobject-fit: cover;
\n}
\n\u062a\u0641\u0627\u0648\u062a object-fit \u0648 background-size
\n\u0627\u0632 object-fit \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648\u0642\u062a\u06cc:
\n\u062a\u0635\u0648\u06cc\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u0633\u062a
\nSEO \u0645\u0647\u0645 \u0627\u0633\u062a
\nAccessibility \u0645\u0647\u0645 \u0627\u0633\u062a
\n\u0646\u06cc\u0627\u0632 \u0628\u0647 alt \u062f\u0627\u0631\u06cc\u062f
\n\u0627\u0632 background-size \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648\u0642\u062a\u06cc:
\n\u062a\u0635\u0648\u06cc\u0631 \u062a\u0632\u0626\u06cc\u0646\u06cc \u0627\u0633\u062a
\n\u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062e\u0627\u0635 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f
\n\u0686\u0646\u062f \u0644\u0627\u06cc\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f
\n\u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627\u06cc\u062c
\nobject-fit \u06a9\u0627\u0631 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f
\n\u0645\u0634\u06a9\u0644
\nimg {
\nwidth: 300px;
\nobject-fit: cover;
\n}
\n\u0631\u0627\u0647\u200c\u062d\u0644
\nimg {
\nwidth: 300px;
\nheight: 200px;
\nobject-fit: cover;
\n}
\n\u0628\u062e\u0634 \u0645\u0647\u0645 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u06cc\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f<\/p>\n
\u0627\u0632 object-position \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
img {
\nobject-position: center top;
\n}
\n\u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u0627 contain
\n.wrapper {
\nbackground: #f5f5f5;
\n}
\n\u0646\u06a9\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc
\n\u0627\u0632 \u0641\u0631\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0645\u062b\u0644 WebP \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f
\n\u062a\u0635\u0627\u0648\u06cc\u0631 Responsive \u0628\u0633\u0627\u0632\u06cc\u062f
\n\u0627\u0632 loading=”lazy” \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f
\n\u0627\u0628\u0639\u0627\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 HTML \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f
\n\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644
\n\u062a\u0641\u0627\u0648\u062a cover \u0648 contain \u0686\u06cc\u0633\u062a\u061f
\ncover
\n\u06a9\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u067e\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f
\n\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u0634 \u0628\u062e\u0648\u0631\u062f
\ncontain
\n\u06a9\u0644 \u062a\u0635\u0648\u06cc\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f
\n\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f
\n\u0622\u06cc\u0627 object-fit \u0646\u0633\u0628\u062a \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f<\/p>\n
\u0628\u0644\u0647\u061b \u0628\u0647\u200c\u062c\u0632 \u0645\u0642\u062f\u0627\u0631 fill.<\/p>\n
\u0622\u06cc\u0627 \u0631\u0648\u06cc \u0648\u06cc\u062f\u06cc\u0648 \u0647\u0645 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f<\/p>\n
\u0628\u0644\u0647:<\/p>\n
<video style=”object-fit: cover;”><\/video>
\n\u0686\u0631\u0627 object-fit \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646 \u06a9\u0627\u0631 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\u061f<\/p>\n
\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0686\u0648\u0646 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0634\u062e\u0635 \u0646\u0634\u062f\u0647\u200c\u0627\u0646\u062f.<\/p>\n
\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/p>\n
\u0648\u06cc\u0698\u06af\u06cc object-fit \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc CSS \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0646\u0645\u0627\u06cc\u0634 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0631 Layout\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0627\u0633\u062a.
\n\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062f\u0648\u0646 \u062e\u0631\u0627\u0628 \u0634\u062f\u0646 \u0646\u0633\u0628\u062a \u062a\u0635\u0648\u06cc\u0631\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0647\u0631 \u0646\u0648\u0639 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f.<\/p>\n
\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f:<\/p>\n
\u062a\u0635\u0648\u06cc\u0631 \u06a9\u0644 \u0641\u0636\u0627 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u062f \u2192 cover
\n\u06a9\u0644 \u062a\u0635\u0648\u06cc\u0631 \u062f\u06cc\u062f\u0647 \u0634\u0648\u062f \u2192 contain
\n\u0645\u062d\u0644 \u0628\u0631\u0634 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f \u2192 object-position<\/p>\n
\u062a\u0631\u06a9\u06cc\u0628 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0637\u0631\u0627\u062d\u06cc\u200c\u0647\u0627\u06cc Responsive \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u200c\u062a\u0631\u060c \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644\u200c\u06a9\u0646\u062a\u0631\u0644\u200c\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n
<\/p>\n
<\/p>\n