Làm cách nào chúng ta có thể thay đổi kích thước hình ảnh trong HTML?

Question

Trong ví dụ bên dưới, chúng tôi sử dụng giá trị "cover" của thuộc tính object-fit. Khi sử dụng giá trị "bìa", tỷ lệ khung hình của nội dung được định cỡ trong khi điền vào hộp nội dung của phần tử. Nó sẽ được cắt bớt để phù hợp với hộp nội dung

Nội dung chính Show

Làm cách nào chúng tôi có thể thay đổi kích thước hình ảnh trong HTML Mcq?
Làm cách nào để thay đổi kích thước hình ảnh trong CSS?

Xem một ví dụ khác trong đó kích thước hình ảnh được đặt theo cách thủ công và thuộc tính object-fit cũng được đặt. Trong trường hợp này, khi trình duyệt được thay đổi kích thước, hình ảnh sẽ giữ nguyên tỷ lệ khung hình và sẽ không bị thay đổi kích thước theo vùng chứa

Trong ví dụ tiếp theo, chúng tôi sử dụng các thuộc tính chiều rộng tối đa và chiều cao tối đa. Thuộc tính chiều cao tối đa đặt chiều cao tối đa của phần tử và thuộc tính chiều rộng tối đa đặt chiều rộng tối đa của phần tử. Để thay đổi kích thước hình ảnh theo tỷ lệ, hãy đặt chiều cao hoặc chiều rộng thành "100%", nhưng không phải cả hai. Nếu bạn đặt cả hai thành "100%", hình ảnh sẽ bị kéo dài



  
    Title of the document
    
    
      Portrait Div
      
        

      
      Landscape Div
      
        

      
      Square Div

Để sử dụng hình ảnh làm nền CSS, hãy sử dụng thuộc tính kích thước nền. Thuộc tính này cung cấp hai giá trị đặc biệt. chứa và bao phủ. Hãy xem các ví dụ với các giá trị này

Thuộc tính thay đổi kích thước hình ảnh được sử dụng trong web phản hồi trong đó hình ảnh tự động thay đổi kích thước để phù hợp với bộ chứa div. Thuộc tính độ rộng tối đa trong CSS được sử dụng để tạo thuộc tính thay đổi kích thước hình ảnh. Thuộc tính thay đổi kích thước sẽ không hoạt động nếu chiều rộng và chiều cao của hình ảnh được xác định trong HTML.

cú pháp

img {
    max-width:100%;
    height:auto;
}

Chiều rộng cũng có thể được sử dụng thay vì chiều rộng tối đa nếu muốn. Điều quan trọng là sử dụng chiều cao. tự động ghi đè bất kỳ thuộc tính height=”…” nào đã có trên hình ảnh. Các thuộc tính CSS max-width và max-height hoạt động tốt nhưng không được nhiều trình duyệt hỗ trợ. ví dụ 1.

html

<!DOCTYPE html>

<html>

____5

0>

2____5<!DOCTYPE html>1<!DOCTYPE html>2<!DOCTYPE html>1>

2____5<!DOCTYPE html>7>

<!DOCTYPE html>9<0

<1<2

<1<4

<1<6

<!DOCTYPE html>9<8

<!DOCTYPE html>9html0

<1html2

html3html4

<!DOCTYPE html>9<8

2html8<!DOCTYPE html>7>

html8

0>

____5>7>

2____5 1 2

<!DOCTYPE html>9< 5 6 7 8

9

<!DOCTYPE html>9html8____85>

2____68 1>

____68>7>

html8html>

đầu ra.

Một cách sử dụng phổ biến là đặt chiều rộng tối đa. 100%; . Tự động; . Một cách khác là sử dụng thuộc tính phù hợp với đối tượng, điều này sẽ phù hợp với hình ảnh mà không thay đổi tỷ lệ.

ví dụ 2.

html

<!DOCTYPE html>

<html>

____5

0>

2____5<!DOCTYPE html>1<!DOCTYPE html>2<!DOCTYPE html>1>

2____5<!DOCTYPE html>7>

<!DOCTYPE html>9<0

<1<2

<1<4

<1<6

<!DOCTYPE html>9<8

<!DOCTYPE html>9html0

_______51____406

_______51____408

_______51____410

<!DOCTYPE html>9<8

2html8<!DOCTYPE html>7>

html8

0>

____5>7>

2____5 1 2

<1____5 5 6 7 8

9

<!DOCTYPE html>9html8____85>

2____68 1>

____68>7>

html8html<!DOCTYPE html>50

đầu ra.

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này