Làm thế nào để bạn tạo hình ảnh trong html?

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 CSS

Ví dụ ảnh gốc là 640×960

https://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 cao

Hì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ó

7

Ngoài ra, bạn có thể sử dụng thuộc tính

11. Bằng cách thiết lập

9

hì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
}

0

Là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ả hai

Khi 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.

https://ik.imagekit.io/ikmedia/women-dress-2.jpg

1

Các giá trị có thể có của

19

• img {
    width: 400px,
    height: 300px
  }

  5 - Hiển thị hình ảnh ở kích thước đầy đủ

• 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

  img {
    width: 400px,
    height: 300px
  }

  5. Ví dụ:
  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

  img {
    width: 400px,
    height: 300px
  }

  5. Ví dụ:
  90 hoặc
  91

Nó cũng có 2 giá trị đặc biệt là

92 và

93

kí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.

5

kí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.

7

thuộ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ền

Cù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

• img {
    width: 400px,
    height: 300px
  }

  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ình

• img {
    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 định

• img {
    width: 400px,
    height: 300px
  }

  05. Nhỏ hơn của một trong hai có hoặc không có

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

1

Tỷ 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ày

phù hợp với đối tượng. che

2

Tỷ 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

3

Hì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

4

phù 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

6

Nhượ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ó

7

3. 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

Xem khoản tiết kiệm thực tế trong bảng điều khiển ImageKit

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

Làm cách nào để thêm hình ảnh vào HTML bằng CSS?

Làm cách nào để thêm logo vào HTML?