Chỉnh Kích Thước Ảnh Trong Css

      568

1) Thuộc tính background-kích cỡ trong CSS

- Thuộc tính background-size dùng để làm tùy chỉnh cấu hình "size của hình nền".

Bạn đang xem: Chỉnh kích thước ảnh trong css


- Tôi gồm một tấm hình cùng với thương hiệu là flower.gif nlỗi sau:

*

- Và 1 phần tử với form size như sau:

- Nếu dùng tấm hình flower.gif để làm ảnh trên nền mang lại phần tử thì khoác định size của ảnh trên nền vẫn bằng với form size của tấm hình cội.

- Tuy nhiên, cùng với câu hỏi áp dụng nằm trong tính background-size, tôi có thể tùy chỉnh cấu hình kích cỡ của nền game lớn hơn kích cỡ của tấm hình nơi bắt đầu.

- Hoặc nhỏ tuổi rộng kích cỡ của tấm hình gốc:

. . . .


2) Cách thực hiện thuộc tính background-kích cỡ trong CSS

- Để sử dụng trực thuộc tính background-size, ta cần sử dụng cú pháp nlỗi sau:

background-size: giá bán trị;- Dưới đó là giải pháp xác định & list các "giá bán trị" được dùng đến trực thuộc tính background-size:

auto

- Hình nền sẽ sở hữu được kích thước bởi với kích thước của tnóng hình nơi bắt đầu.

Xem ví dụ
apx bpx

- Hình nền sẽ sở hữu chiều rộng là a pixel cùng chiều cao là b pixel.

- Nếu 1 trong nhì cực hiếm là auto thì cực hiếm đó sẽ tự động hóa được khẳng định dựa trên giá trị còn lại làm thế nào để cho đúng tỷ lệ với tấm hình nơi bắt đầu.

Xem thêm:

Ví dụ: Tôi bao gồm một tnóng hình cùng với form size 200x100: Nếu giá trị nằm trong tính background-size là 400px tự động hóa thì nó sẽ tương đương với 400px 200px Nếu giá trị ở trong tính background-kích cỡ là tự động 70px thì nó vẫn tương đương cùng với 140px 70px

- Lưu ý: Nếu ta chỉ chỉ dẫn một cực hiếm thì giá trị sẽ là chiều rộng của màn hình, cực hiếm còn sót lại đang mang định là tự động.

Xem ví dụ
a% b%

- Hình nền đã có:

Chiều rộng lớn bởi a % chiều rộng lớn vào phần phạm vi nhưng nền game ban đầu được mở ra. Chiều cao bằng b % độ cao vào phần phạm vi cơ mà màn hình bắt đầu được mở ra.
(bạn hãy coi nằm trong tính background-origin để nắm rõ thay như thế nào là phạm vi ảnh nền bước đầu được xuất hiện)

- Nếu một trong những nhị giá trị là tự động hóa thì cực hiếm đó sẽ tự động được xác định dựa theo quý giá còn lại làm sao cho đúng Xác Suất cùng với tnóng hình nơi bắt đầu.

- Lưu ý: Nếu ta chỉ đưa ra một cực hiếm thì quý giá đó là chiều rộng lớn của ảnh trên nền, quý hiếm còn sót lại đang mặc định là tự động hóa.

Xem ví dụ
cover

- Đối với mức giá trị này, màn hình sẽ có những Điểm sáng như sau:

Hình nền sẽ "tủ đầy" diện tích S của phần tử. Tỷ lệ chiều rộng/độ cao của màn hình đã bằng cùng với xác suất chiều rộng/độ cao của tấm hình nơi bắt đầu. Tuy nhiên, giả dụ phần trăm chiều rộng/chiều cao của phần tử không giống với tỷ lệ chiều rộng/chiều cao của tnóng hình gốc thì hình nền đang hiển thị "ko trọn vẹn"
Xem ví dụ
contain

- Đối với mức giá trị này, nền game sẽ có được những điểm sáng nlỗi sau:

Tỷ lệ chiều rộng/độ cao của nền game vẫn bởi cùng với xác suất chiều rộng/chiều cao của tnóng hình gốc. Hình nền sẽ được hiển thị "trọn vẹn" với size lớn nhất rất có thể phía bên trong thành phần HTML.
Xem ví dụ
initial

- Sử dụng giá trị khoác định của chính nó.

(Mặc định, quý hiếm ở trong tính background-kích cỡ của một trong những phần tử là auto)

Xem ví dụ
inherit

- Kế thừa quý giá trực thuộc tính background-form size trường đoản cú phần tử phụ vương của chính nó.

Xem ví dụ

Tổng quan lại về CSSLàm nỗ lực nào nhằm định hình đến một trong những phần tử ?Những kỹ năng cơ bạn dạng vào việc viết mã CSSXác định Màu sắc (color) trong CSSCách xác định bộ lựa chọn (selector) của phần tửCấu trúc bộ phận vào CSSTạo đường viền (border) cho chỗ tửĐường viền hình ảnhThiết lập vùng đệm (padding) cho phần tửXác định khoảng cách lề (margin) của phần tửMàu nền (background color)Kích thước phần tửHình nền (background image)Thiết lập độ cong (radius) cho những góc của phần tửTạo chiếc láng (shadow) dồn phần tửCác ở trong tính định hình DANH SÁCHCác trực thuộc tính định hình VĂN BẢNSở chọn dựa trên quan hệ tình dục ngày tiết thốngCách xác định bộ lựa chọn trong một vài ngôi trường hòa hợp quánh biệtBộ chọn của các “thành phần” phía bên trong phần tửCách định hình đến bảng (table) bằng CSSThuộc tính box-sizing trong CSSCác loại vệt trích dẫn (quote) được hỗ trợ trong CSSChia văn uống bản thành những cộtTạo một vài ba cảm giác đơn giản đến hình ảnhChỉnh độ nhìn trong suốt của phần tửTạo tkhô hanh cuộn (scroll) cho phần tửXác định vẻ bên ngoài hiển thị (display) của phần tửThiết lập địa điểm cho phần tửHiệu ứng gửi độngCách áp dụng đội nằm trong tính TransitionĐịnh dạng cho Liên kếtThuộc tính Float và Clear vào CSSĐộ ưu tiên hiển thị là gì ?
Chúng tôi chuyên cung cấp các bài viết ở trong lĩnh vực xây dựng web, tư liệu lý giải học tập HTML, CSS, Javascript, jQuery, MySQL, PHP..