Thay đổi kích thước CSS hình ảnh

img {
  display: block;
  max-width: 100%;
}

trong CSS

img {
 max-width: 100%;
 max-height: 100%;
}
.dog {
 height: 200px;
 width: 200px;
}

• Thuộc tính phù hợp với đối tượng

Thuộc tính object-fit là một thuộc tính khác được sử dụng để tự động thay đổi kích thước hình ảnh của trang web. Thuộc tính object-fit sẽ thay đổi kích thước hình ảnh bằng cách sử dụng giá trị chứa theo yêu cầu của màn hình

Ví dụ

Trong HTML

trong CSS

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.dog {
 height:300px;
 width: 300px;
}

Làm cách nào để căn chỉnh hình ảnh trong CSS?

Cho dù đó là căn trái hay căn phải, hoặc thậm chí là căn giữa, đều có thể thực hiện được và hình ảnh có thể được căn chỉnh trong vòng vài giây trong CSS thông qua các thuộc tính text-align và float

• Sử dụng Thuộc tính căn chỉnh văn bản

Sử dụng thuộc tính text-align có thể dễ dàng căn chỉnh hình ảnh trên trang web. Với thuộc tính text-align và các giá trị như left, center và right, người ta có thể căn chỉnh hình ảnh trên trang web một cách thích hợp

Ví dụ

Trong HTML

________số 8

trong CSS

 #center {  
 text-align: center;
 }

• Sử dụng thuộc tính float

Thuộc tính float là một thuộc tính khác được sử dụng để căn chỉnh hình ảnh trên trang web

Ví dụ

Trong HTML

img {
  display: block;
  max-width: 100%;
}

trong CSS

img {
  display: block;
  max-width: 100%;
}

Làm cách nào để thêm hình nền trong CSS?

Trang web được nâng cao về mặt trực quan đặt hình ảnh tối giản đẹp mắt làm hình nền. May mắn thay, CSS có thuộc tính background-image để đặt những hình ảnh đẹp làm hình nền cho trang web

Ví dụ

trong CSS

img {
  display: block;
  max-width: 100%;
}

Phần kết luận

Việc thêm, thay đổi và căn chỉnh hình ảnh để biến một trang web có giao diện đơn giản thành một trang web hấp dẫn trực quan chỉ mất vài phút với CSS. Chúng tôi hy vọng bạn đã học được điều gì đó mới về phát triển giao diện người dùng để cải thiện giao diện của trang web.  

Học CSS cơ bản miễn phí

Nếu bạn muốn tìm hiểu miễn phí một số khái niệm cơ bản về CSS, hãy thử Thử thách viết mã trong 5 ngày của chúng tôi. Sau một giờ mỗi ngày trong năm ngày, bạn sẽ tìm hiểu kiến ​​thức cơ bản về HTML, CSS và JavaScript. Đăng ký ngay qua form bên dưới.