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: css thay đổi kích thước hình ảnh

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 để chúng vừa với div theo tỷ lệ, duy trì chiều cao và chiều rộng của nó.

Sử dụng < code> max-width và max-height Thuộc tính để 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 đó sẽ chiếm tổng số pixel của nó kích thước. 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  Cách tạo Menu thả xuống HTML [+ Ví dụ] - mã html cho menu thả xuống

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 sang 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ủ đề css thay đổi kích thước hình ảnh

XHTML and CSS Tutorial - 10 - Resizing Images

  • Tác giả: thenewboston
  • Ngày đăng: 2011-03-05
  • Đánh giá: 4 ⭐ ( 1850 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Join our community below for all the latest videos and tutorials!

    Website - https://thenewboston.com/
    Discord - https://discord.gg/thenewboston
    GitHub - https://github.com/thenewboston-developers
    Reddit - https://www.reddit.com/r/thenewboston/
    LinkedIn - https://www.linkedin.com/company/thenewbostoncoin/
    Facebook - https://www.facebook.com/thenewbostoncoin/
    Twitter - https://twitter.com/thenewboston_og
    Instagram - https://www.instagram.com/thenewbostoncoin/
    Twitch - https://www.twitch.tv/thenewboston/videos

    TNBC Donations: b6e21072b6ba2eae6f78bc3ade17f6a561fa4582d5494a5120617f2027d38797

Top 6 ứng dụng chỉnh sửa ảnh tốt nhất cho Android và iPhone

  • Tác giả: www.vidmore.com
  • Đánh giá: 3 ⭐ ( 3654 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy xem ứng dụng thay đổi kích thước ảnh miễn phí tốt nhất để giúp bạn sửa đổi hình ảnh theo tỷ lệ mong muốn. Và quyết định ứng dụng nào hoạt động linh hoạt hơn.

Thay đổi kích thước hình ảnh bằng CSS với thuộc tính object-fit

  • Tác giả: fuvavi.com
  • Đánh giá: 5 ⭐ ( 2068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giải quyết rắc rối về hình ảnh bị vỡ khi thay đổi kích thước với css object-fit

Các thuộc tính tùy chỉnh kích thước trong CSS

  • Tác giả: thachpham.com
  • Đánh giá: 3 ⭐ ( 8384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu các thuộc tính tùy chỉnh kích thước các phần tử trong CSS như width, height, min-width, max-width, min-height, max-height

Crop hình ảnh bằng CSS đơn giản và cần thiết

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

Cách css tự động resize ảnh nền theo thẻ div – WebFaver

  • Tác giả: webfaver.com
  • Đánh giá: 3 ⭐ ( 3470 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Với một kỹ thuật css tự động resize ảnh, bạn có thể giải quyết vấn đề này để ảnh thumbnail luôn fix đúng theo kích thước quy định với bất cứ tỉ lệ ảnh nào.

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

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

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