Nếu hình ảnh của bạn không vừa với bố cục, bạn có thể thay đổi kích thước hình ảnh đó trong HTML. Một trong những cách đơn giản nhất để thay đổi kích thước hình ảnh trong HTML là sử dụng thuộc tính
8 và
9 trên thẻ img {
width: 400px,
height: 300px
}
0. Các giá trị này chỉ định chiều cao và chiều rộng của thành phần hình ảnh. Các giá trị được đặt trong px i. e. pixel CSSVí dụ ảnh gốc là 640×960
//ik.imagekit.io/ikmedia/women-dress-2.jpg
Chúng tôi có thể hiển thị nó với chiều cao 500 pixel và chiều rộng 400 pixel
Nếu chiều cao và chiều rộng bắt buộc của phần tử hình ảnh không khớp với kích thước thực tế của hình ảnh thì trình duyệt sẽ thu nhỏ [hoặc nâng cấp] hình ảnh. Thuật toán chính xác được trình duyệt sử dụng để mở rộng quy mô có thể khác nhau và tùy thuộc vào phần cứng và hệ điều hành cơ bản.
Có một số nhược điểm của việc thay đổi kích thước hình ảnh phía máy khách, chủ yếu là chất lượng hình ảnh kém và hiển thị hình ảnh chậm hơn. Để khắc phục điều này, bạn nên cung cấp hình ảnh đã được thay đổi kích thước từ máy chủ. Bạn có thể sử dụng Thumbor hoặc CDN hình ảnh miễn phí như ImageKit. io để thay đổi kích thước hình ảnh động bằng các tham số URL
Thay đổi kích thước hình ảnh trong CSS
Bạn cũng có thể chỉ định chiều cao và chiều rộng trong CSS
img {
width: 400px,
height: 300px
}
Giữ nguyên tỷ lệ khung hình trong khi thay đổi kích thước hình ảnh
Khi bạn chỉ định cả
8 và
9, hình ảnh có thể bị mất tỷ lệ khung hình. Bạn có thể duy trì tỷ lệ khung hình bằng cách chỉ xác định
9 và đặt
8 thành img {
width: 400px,
height: 300px
}
5 bằng cách sử dụng thuộc tính CSS
1Điều này sẽ hiển thị hình ảnh rộng 400px. Chiều cao được điều chỉnh tương ứng để duy trì tỷ lệ khung hình của ảnh gốc. Bạn cũng có thể chỉ định thuộc tính
8 và đặt
9 là img {
width: 400px,
height: 300px
}
5, nhưng hầu hết các bố cục thường bị giới hạn về chiều rộng chứ không phải chiều caoHình ảnh đáp ứng điều chỉnh dựa trên chiều rộng có sẵn
Bạn có thể chỉ định chiều rộng theo tỷ lệ phần trăm thay vì số tuyệt đối để làm cho nó phản hồi nhanh. Bằng cách đặt
9 thành
10, hình ảnh sẽ tăng tỷ lệ nếu được yêu cầu để khớp với chiều rộng của phần tử gốc. Nó có thể dẫn đến hình ảnh bị mờ vì hình ảnh có thể được thu nhỏ lại lớn hơn kích thước ban đầu của nó
7Ngoài ra, bạn có thể sử dụng thuộc tính
11. Bằng cách thiết lập
9hình ảnh sẽ thu nhỏ lại nếu cần, nhưng không bao giờ tăng tỷ lệ lớn hơn kích thước ban đầu của nó
img {
width: 400px,
height: 300px
}
0Làm cách nào để thay đổi kích thước và cắt hình ảnh để phù hợp với khu vực thành phần?
Cho đến giờ, chúng ta đã thảo luận về cách thay đổi kích thước hình ảnh bằng cách chỉ định
8 hoặc
9 hoặc cả haiKhi bạn chỉ định cả
8 và
9, hình ảnh buộc phải vừa với kích thước được yêu cầu. Nó có thể thay đổi tỷ lệ khung hình ban đầu. Đôi khi, bạn muốn giữ nguyên tỷ lệ khung hình trong khi hình ảnh bao phủ toàn bộ khu vực ngay cả khi một phần của hình ảnh bị cắt. Để đạt được điều này, bạn có thể sử dụng- Hình nền
- Tài sản css
16
Thay đổi kích thước hình nền
17 là một thuộc tính CSS rất mạnh cho phép bạn chèn hình ảnh vào các phần tử khác ngoài img {
width: 400px,
height: 300px
}
0. Bạn có thể kiểm soát việc thay đổi kích thước và cắt xén hình ảnh bằng các thuộc tính CSS sau-
19 - Kích thước của hình ảnh
70 - Vị trí bắt đầu của hình nền
background-size
Theo mặc định, hình nền được hiển thị ở kích thước đầy đủ ban đầu. Bạn có thể ghi đè điều này bằng cách đặt chiều cao và chiều rộng bằng thuộc tính CSS
19. Bạn có thể phóng to hoặc thu nhỏ hình ảnh theo ý muốn. //ik.imagekit.io/ikmedia/women-dress-2.jpg
1Các giá trị có thể có của
19
5 - Hiển thị hình ảnh ở kích thước đầy đủimg { width: 400px, height: 300px }
74 - Đặt chiều rộng và chiều cao của hình nền. Giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thì giá trị thứ hai được đặt thành
5. Ví dụ:img { width: 400px, height: 300px }
76 hoặc
77
78 - Đặt chiều rộng và chiều cao của hình nền theo phần trăm của phần tử gốc. Giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thì giá trị thứ hai được đặt thành
5. Ví dụ:img { width: 400px, height: 300px }
90 hoặc
91
Nó cũng có 2 giá trị đặc biệt là
92 và
93kích thước nền. chứa
______194 - Nó giữ nguyên tỷ lệ khung hình gốc của hình ảnh, nhưng hình ảnh được thay đổi kích thước để hiển thị đầy đủ. Chiều dài hoặc chiều rộng dài nhất sẽ vừa với kích thước đã cho, bất kể kích thước của hộp chứa.
5kích thước nền. cover
______193 - Nó giữ nguyên tỷ lệ khung hình ban đầu nhưng thay đổi kích thước hình ảnh để bao phủ toàn bộ vùng chứa, ngay cả khi nó phải nâng cấp hình ảnh hoặc cắt hình ảnh.
7thuộc tính CSS phù hợp với đối tượng
Bạn có thể sử dụng thuộc tính CSS
16 trên phần tử img {
width: 400px,
height: 300px
}
0 để chỉ định cách thay đổi kích thước và cắt hình ảnh để vừa với vùng chứa. Trước khi thuộc tính CSS này được giới thiệu, chúng tôi phải sử dụng hình nềnCùng với
98,
99 và img {
width: 400px,
height: 300px
}
00, có thêm 5 giá trị khả thi cho đối tượng phù hợp
92. Nó giữ nguyên tỷ lệ khung hình ban đầu của hình ảnh, nhưng hình ảnh được thay đổi kích thước để hiển thị đầy đủ. Chiều dài hoặc chiều rộng dài nhất sẽ vừa với kích thước đã cho, bất kể kích thước của hộp chứa
93. Nó giữ nguyên tỷ lệ khung hình ban đầu nhưng thay đổi kích thước hình ảnh để bao phủ toàn bộ vùng chứa, ngay cả khi nó phải nâng cấp hình ảnh hoặc cắt xén hình ảnh
03. Đây là giá trị mặc định. Hình ảnh sẽ lấp đầy khu vực nhất định của nó, ngay cả khi điều đó có nghĩa là mất tỷ lệ khung hìnhimg { width: 400px, height: 300px }
04. Hình ảnh hoàn toàn không bị thay đổi kích thước và kích thước hình ảnh gốc sẽ lấp đầy khu vực nhất địnhimg { width: 400px, height: 300px }
05. Nhỏ hơn của một trong hai có hoặc không cóimg { width: 400px, height: 300px }
Bạn có thể sử dụng
img {
width: 400px,
height: 300px
}
06 để kiểm soát vị trí bắt đầu của hình ảnh trong trường hợp một phần hình ảnh được cắt xén đang được hiển thịHãy hiểu những điều này với các ví dụ
Chiều rộng ban đầu của hình ảnh sau đây là 1280px và chiều cao là 854px. Ở đây, nó đang kéo dài đến chiều rộng tối đa có sẵn bằng cách sử dụng
img {
width: 400px,
height: 300px
}
07
0đối tượng phù hợp. chứa
1Tỷ lệ khung hình ban đầu của hình ảnh vẫn như cũ, nhưng hình ảnh đã được thay đổi kích thước để hiển thị đầy đủ. Chúng tôi đã thêm đường viền
img {
width: 400px,
height: 300px
}
08 xung quanh hình ảnh để hiển thị điều nàyphù hợp với đối tượng. che
2Tỷ lệ khung hình ban đầu được giữ nguyên nhưng để bao phủ toàn bộ khu vực, hình ảnh được cắt bớt từ bên trái và bên phải
phù hợp với đối tượng. lấp đầy
3Hình ảnh buộc phải vừa với vùng chứa rộng 200px với chiều cao 300px, tỷ lệ khung hình gốc không được giữ nguyên
phù hợp với đối tượng. không ai
4phù hợp với đối tượng. thu nhỏ
5đối tượng phù hợp. bìa và vị trí đối tượng. phải
6Nhược điểm của việc thay đổi kích thước hình ảnh phía khách hàng
Có một số nhược điểm nhất định của việc thay đổi kích thước phía máy khách mà bạn nên ghi nhớ
1. Kết xuất hình ảnh chậm
Vì hình ảnh có kích thước đầy đủ vẫn được tải trước khi quá trình thay đổi kích thước diễn ra trong trình duyệt, nên sẽ mất nhiều thời gian hơn để hoàn tất quá trình tải xuống và cuối cùng hiển thị. Điều này có nghĩa là nếu bạn có một số lượng lớn, 1. Ảnh 5 megabyte, 1024×682 mà bạn đang hiển thị ở chiều rộng 400px, toàn bộ 1. Hình ảnh 5 megabyte được khách truy cập tải xuống trước khi trình duyệt thay đổi kích thước hình ảnh xuống 400px
Bạn có thể thấy thời gian tải xuống này trên bảng điều khiển mạng, như minh họa trong ảnh chụp màn hình bên dưới
Mặt khác, nếu bạn thay đổi kích thước hình ảnh trên máy chủ bằng một số chương trình hoặc CDN hình ảnh, thì trình duyệt sẽ không phải tải một lượng lớn dữ liệu và lãng phí thời gian giải mã và hiển thị nó
Với ImageKit. io, bạn có thể dễ dàng thay đổi kích thước hình ảnh bằng các tham số URL. Ví dụ -
Ảnh gốc
https. //ik. bộ hình ảnh. io/ikmedia/phụ nữ ăn mặc-2. jpg
Hình ảnh rộng 400px với tỷ lệ khung hình được giữ nguyên
https. //ik. bộ hình ảnh. io/ikmedia/phụ nữ ăn mặc-2. jpg?tr=w-400
2. Chất lượng hình ảnh kém
Thuật toán chia tỷ lệ chính xác được trình duyệt sử dụng có thể khác nhau và hiệu suất của nó phụ thuộc vào phần cứng và hệ điều hành cơ bản. Khi một hình ảnh tương đối lớn hơn được thay đổi kích thước để phù hợp với một vùng chứa nhỏ hơn, hình ảnh cuối cùng có thể bị mờ rõ rệt
Có sự đánh đổi giữa tốc độ và chất lượng. Lựa chọn cuối cùng phụ thuộc vào trình duyệt. firefox 3. 0 và các phiên bản mới hơn sử dụng thuật toán lấy mẫu lại song tuyến tính, được điều chỉnh để đạt chất lượng cao thay vì tốc độ. Nhưng điều này có thể thay đổi
Bạn có thể sử dụng thuộc tính CSS
img {
width: 400px,
height: 300px
}
09, thuộc tính này xác định cách trình duyệt sẽ hiển thị hình ảnh nếu hình ảnh đó được thu nhỏ lên hoặc xuống so với kích thước ban đầu của nó
73. Lãng phí băng thông
Vì dù sao thì hình ảnh có kích thước đầy đủ cũng đang được tải, điều này dẫn đến lãng phí băng thông đáng lẽ có thể được lưu lại. Truyền dữ liệu không hề rẻ. Ngoài việc tăng hóa đơn băng thông của bạn, nó còn khiến người dùng của bạn phải trả tiền thật
Nếu bạn đang sử dụng CDN hình ảnh, bạn có thể giảm mức tiêu thụ băng thông của mình hơn nữa bằng cách cung cấp hình ảnh ở định dạng thế hệ tiếp theo e. g. WebP hoặc AVIF
Bảng điều khiển thân thiện với người dùng cũng sẽ cho bạn biết bạn đã tiết kiệm được bao nhiêu băng thông cho đến nay
4. Tăng bộ nhớ và yêu cầu xử lý trên các thiết bị khách
Thay đổi kích thước hình ảnh lớn để phù hợp với vùng chứa nhỏ hơn rất tốn kém và có thể gây khó khăn trên các thiết bị cấp thấp, nơi cả bộ nhớ và sức mạnh xử lý đều bị hạn chế. Điều này làm chậm toàn bộ trang web và làm giảm trải nghiệm người dùng
Tóm lược
Khi thực hiện các trang web, hình ảnh cần phải phù hợp với bố cục hoàn hảo. Đây là những gì bạn cần nhớ để có thể thực hiện các thiết kế đáp ứng