How to use CSS object-position to implement image positioning in img tags

Direct answer: Use the object-position property of CSS, enter two values ​​to represent the positioning of the image horizontally and vertically. Horizontal positioning values: left (left), right (right), center (center), percentage (%), start (start), end (end). Vertical positioning values: top (up), bottom (under), center (center), percentage (%), start (start), end (end).

How to use object-position to achieve image positioning in CSS

Direct answer:

Using the object-position property of CSS, you can control the position of the image in the container, which accepts two values ​​that indicate the positioning of the image in the horizontal and vertical directions.

Detailed description:

object-position property accepts two values ​​separated by spaces, the first value indicates the position of the image in the horizontal direction and the second value indicates the position of the image in the vertical direction. This is very similar to background-position property.

Possible positioning values ​​are as follows:

• Left: The left edge of the image is aligned with the left edge of the container.
• Right: The right edge of the image is aligned with the right edge of the container.
• Center: The center of the image is aligned with the center of the container.
• Percentage (%): The percentage of the position of the image relative to the width or height of the container.
• Keywords (top, bottom, start, end): The position of the image relative to the top or bottom of the container and the start or end.

grammar:

 <code class="css">object-position:  ;</code>

Example:

Center the image horizontally within the container and offset 20% downward in the vertical direction:

 <code class="css">img { object-position: center 20%; }</code>

Notes:

• object-position is suitable for image and video elements.
• If the image has a different aspect ratio than the container, it may be cropped or stretched to fit the container.
• You can use object-position with object-fit attribute to control the scaling and cropping of the image.

The above is the detailed content of How to use CSS object-position to implement image positioning in img tags. For more information, please follow other related articles on the PHP Chinese website!