Hướng dẫn này giới thiệu cách thay đổi kích thước hình ảnh trong CSS

Bạn đang xem: cách thay đổi kích thước của hình ảnh trong css

Bài viết này giới thiệu các phương pháp để thay đổi kích thước hình ảnh trong CSS để điều chỉnh chúng trong một div theo tỷ lệ, duy trì chiều cao và chiều rộng của nó.

Sử dụng thuộc tính max-width max-height để Thay đổi kích thước hình ảnh trong CSS

Bất cứ khi nào chúng tôi chèn hình ảnh vào HTML, hình ảnh chiếm tổng số pixel có kích thước của nó. Nếu hình ảnh nằm trong một vùng chứa cụ thể, đôi khi kích thước của hình ảnh có thể lớn hơn kích thước của vùng chứa. Hình ảnh sẽ bao phủ nhiều không gian hơn trên màn hình; nó sẽ lấy các khu vực từ các yếu tố khác. Do đó, trang web sẽ không tuân theo thiết kế của chúng tôi và sẽ không hấp dẫn. Để giải quyết vấn đề này, chúng ta có thể sử dụng thuộc tính CSS max-width max-height để tự động thay đổi kích thước hình ảnh theo kích thước của vùng chứa. Các thuộc tính này đặt chiều cao và chiều rộng tối đa của một phần tử. Nếu nội dung trong phần tử có nhiều chiều rộng và chiều cao hơn các thuộc tính max-width max-height , thì kích thước của chúng sẽ được điều chỉnh với giá trị của các thuộc tính này. Nhưng, nếu kích thước của chúng nhỏ, sẽ không có tác dụng. Chúng tôi có thể đặt các thuộc tính max-height max-width thành một phần tử và do đó, các phần tử bên trong vùng chứa sẽ điều chỉnh kích thước của chúng.

Ví dụ: tạo div với lớp cat trong HTML. Bên trong div , hãy chèn một hình ảnh bằng thẻ & lt; img & gt; . Trong CSS, chọn thẻ img và gán các phần tử max-width max-height thành 100% . Sau đó, chọn lớp cat và cung cấp height width của 200px 200px .

Trong ví dụ dưới đây, chúng tôi đã chèn một hình ảnh ngẫu nhiên từ LoremFlickr , có 300px width và < mã> chiều cao . Tuy nhiên, vùng chứa cat có chiều cao và chiều rộng là 200px . Khi chúng tôi sử dụng thuộc tính max-height max-width , các hình ảnh lớn hơn sẽ thu nhỏ lại bằng kích thước của vùng chứa. Do đó, chúng tôi đã tự động thay đổi kích thước hình ảnh.

Xem Thêm  10 ví dụ về trò chuyện trực tiếp và cửa sổ bật lên hay nhất để truyền cảm hứng cho chính bạn - bật lên trò chuyện cho trang web

Mã ví dụ:

  & lt; div class = "cat" & gt;
    & lt; img src = "https://loremflickr.com/300/300" / & gt;
& lt; / div & gt;
 
  img {
 chiều rộng tối đa: 100%;
 chiều cao tối đa: 100%;
}
.con mèo {
 chiều cao: 200px;
 chiều rộng: 200px;
}
 

Sử dụng Thuộc tính object-fit để Thay đổi kích thước hình ảnh trong CSS

Chúng tôi có thể sử dụng thuộc tính object-fit trong CSS để thay đổi kích thước hình ảnh cho vừa với vùng chứa của nó. Một vùng chứa có thể có kích thước lớn hơn hoặc nhỏ hơn so với hình ảnh. Thuộc tính cho phép chúng tôi điều chỉnh hình ảnh hoặc video theo kích thước của vùng chứa. Chúng tôi có thể chỉ định cách hình ảnh phù hợp bằng cách sử dụng thuộc tính object-fit . Thuộc tính nhận các giá trị như fill , chứa , cover , none scale-down < / mã>. Chúng tôi có thể sử dụng giá trị contains để hình ảnh lớn hơn có thể thu nhỏ theo kích thước đã cho của vùng chứa.

Ví dụ: chèn một hình ảnh có kích thước 600px chiều cao và chiều rộng bằng thẻ img như trong ví dụ đầu tiên. Trong CSS, chọn thẻ và đặt chiều cao và chiều rộng thành 100% . Sử dụng giá trị contains trong tùy chọn object-fit . Sau đó, chọn lớp cat và cung cấp chiều cao và chiều rộng của 300px cho vùng chứa.

Tại đây, chúng tôi đã chèn một hình ảnh có kích thước lớn hơn kích thước của vật chứa. Hình ảnh có kích thước 600px trong khi vùng chứa chỉ là 300px . Sử dụng thuộc tính object-fit , chúng tôi có thể thu nhỏ hình ảnh theo kích thước của vùng chứa. Do đó, chúng tôi có thể tự động thay đổi kích thước hình ảnh.

Mã ví dụ:

  & lt; div class = "cat" & gt;
    & lt; img src = "https://loremflickr.com/400/400" / & gt;
& lt; / div & gt;
 
  img {
 chiều cao: 100%;
 chiều rộng: 100%;
 object-fit: chứa;
}
.con mèo {
 chiều cao: 300px;
 chiều rộng: 300px;
}
 

Sử dụng Giá trị auto cho Chiều rộng và thuộc tính max-height để Thay đổi kích thước hình ảnh trong CSS

Chúng ta có thể sử dụng giá trị auto theo chiều rộng và đặt max-heightThuộc tính để chỉ định chiều rộng của hình ảnh để vừa với vùng chứa. Chúng tôi sẽ thu nhỏ chiều cao của hình ảnh với chiều cao của vùng chứa. Ví dụ: chèn một hình ảnh như trên trong HTML và đặt chiều cao của vùng chứa là 200px trong CSS. Tiếp theo, chọn thẻ img , đặt chiều rộng thành auto và đặt thuộc tính max-height thành 100% .

Trong ví dụ bên dưới, ban đầu hình ảnh có 400px chiều cao và chiều rộng. Chúng tôi đã đặt chiều cao của vùng chứa thành 200px . Thuộc tính max-height được đặt thành 100% sẽ thu nhỏ hình ảnh thành 200px . Do đó, chúng tôi đã thay đổi kích thước chiều cao của hình ảnh theo chiều cao của vùng chứa.

Mã ví dụ:

  & lt; div class = " con mèo "& gt;
    & lt; img src = "https://loremflickr.com/400/400" / & gt;
& lt; / div & gt;
 
 . cat {
 chiều cao: 200px
}
img {
 chiều rộng: tự động;
 chiều cao tối đa: 100%;
}
 

Viết cho chúng tôi

Các bài viết trên DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề cách thay đổi kích thước của hình ảnh trong css

Dự Án 1: Thay đổi kích thước các ảnh bằng HTML,CSS, JavaScript

  • Tác giả: Học Lập Trình
  • Ngày đăng: 2021-11-06
  • Đánh giá: 4 ⭐ ( 3180 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 29: Cách tạo responsive cho web

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 8202 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài 29 sẽ giới thiệu cho các bạn về cách tạo responsive cho web. Nói dễ hiểu là giao diện sẽ tùy biến thay đổi cho phù hợp với kích thước màn hình hiển thị. Trong bài mình sẽ hướng dẫn một ví dụ đơn giản là thay đổi kích thước hình khi màn hình hiển thị thay đổi.

Thay đổi kích thước một hình ảnh trong C#

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 3 ⭐ ( 8126 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này tôi sẽ hướng dẫn các bạn cách để thay đổi kích thước một hình ảnh theo kích thước mong muốn.

Kích thước hình ảnh HTML

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 5 ⭐ ( 2590 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách chỉnh kích thước ảnh trong HTML và CSS

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 6259 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hình ảnh (image) trong CSS, chèn ảnh, resize và căn chỉnh kích thước ả

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 6998 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hình ảnh (image) trong CSS, Hình ảnh (image) trong CSS, chèn ảnh, resize và căn chỉnh kích thước ảnh

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 9035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php