Làm thế nào để bạn di chuyển một đối tượng sang bên phải trong css?

Thuộc tính CSS object-position được sử dụng để căn chỉnh bất kỳ phần tử thay thế nào đã chọn (e. g. , một <img>) trong hộp chứa nó

img {
  object-position: right bottom;
}

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

Mặc dù có thể thấy object-position được sử dụng trên các phần tử <img> là phổ biến nhất, nhưng nó có thể được sử dụng trên các loại phần tử được thay thế khác, như

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

object-position là một phần của đặc tả Mô-đun Hình ảnh CSS Cấp 3

cú pháp

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

Đó chỉ là một cách giải thích thực sự dài dòng rằng chúng ta có thể sử dụng từ khóa hoặc giá trị độ dài để đặt căn chỉnh của phần tử trong vùng chứa

giá trị

/* Positional values */
object-position: 50% 50%; /* default position */
object-position: right bottom;
object-position: 20px 95px;
object-position: center 20px; /* mix and match */
object-position: 60% top; /* mix and match */

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

ví dụ

Hãy xem xét một vài ví dụ khác nhau về tài sản object-position tại nơi làm việc

sử dụng cơ bản

Dự phòng nhúng CodePen

Ví dụ trên minh họa cách object-position căn chỉnh phần tử hình ảnh so với vùng chứa chính của nó khi hình ảnh nhỏ hơn vùng chứa chính. Một lần nữa, lưu ý việc sử dụng

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

Hình ảnh vượt quá vùng chứa

Dự phòng nhúng CodePen

Bản trình diễn này minh họa cách một phần tử hình ảnh lớn hơn vùng chứa chính của nó hoạt động với các giá trị object-position khác nhau

Các loại nội dung thay thế khác

Dự phòng nhúng CodePen

Ví dụ này cho thấy object-position được sử dụng với các loại nội dung được thay thế khác, bao gồm

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

Thủ thuật

Ví dụ bên dưới có bố cục đáp ứng cơ bản với hình ảnh phía trên văn bản. Có lẽ người đàn ông trong ảnh này là chủ đề của bài viết và khi kích thước màn hình nhỏ hơn, chúng tôi muốn duy trì sự tập trung vào chủ đề đó. object-position được sử dụng ở đây để duy trì tiêu điểm đó, cắt xén hình ảnh tại một điểm ngắt cụ thể với

/* Positional values */
object-position: 50% 50%; /* default position */
object-position: right bottom;
object-position: 20px 95px;
object-position: center 20px; /* mix and match */
object-position: 60% top; /* mix and match */

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

Dự phòng nhúng CodePen

Dự phòng nhúng CodePen

Ngoài trọng tâm theo vị trí, việc sử dụng thực tế của object-position bị hạn chế. Tuy nhiên, nó là một thuộc tính mà bạn có thể sáng tạo một chút khi nói đến thiết kế và bố cục trang.

Dự phòng nhúng CodePen

Một điều thú vị khác mà chúng ta có thể làm là sử dụng không gian âm của vùng chứa chính để vẽ các đường viền giả. Chúng tôi đặt màu nền trên vùng chứa chính, thả vào một hình ảnh nhỏ hơn vùng chứa, sau đó sử dụng object-position để căn chỉnh hình ảnh. Những gì còn lại trông giống như một đường viền. Sẽ cực kỳ thú vị khi chúng tôi bắt đầu đặt nhiều thùng chứa lại với nhau vì có vẻ như có một đường thẳng được vẽ giữa chúng, có thể tạo thành các mẫu gọn gàng

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên