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 thu nhỏ 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 để xếp chúng theo tỷ lệ của div, 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 sẽ 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  MySQL - Các kiểu dữ liệu - loại cơ sở dữ liệu trong mysql

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 thu nhỏ hình ảnh trong css

Bạn đã thực sự “thành thạo” CSS Flexbox chưa ? 🤔

  • Tác giả: evondev
  • Ngày đăng: 2021-07-28
  • Đánh giá: 4 ⭐ ( 5285 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã thực sự “thành thạo” CSS Flexbox chưa ? 🤔Hãy xem video này để biết thêm nhiều kiến thức bổ ích nhé.
    🔥 Tham khảo khoá học HTML CSS cơ bản của mình: https://evondev.com/khoa-hoc-html-css
    🔥 Tham khảo khoá học HTML CSS nâng cao của mình: https://evondev.com/khoa-hoc-huong-dan-cat-psd
    🔥 Tham khảo khoá học Javscript cơ bản của mình: https://evondev.com/khoa-hoc-javascript-co-ban
    👉 Kết nối với mình
    🚀Fanpage: https://www.facebook.com/evondevblog/
    🚀Facebook: https://www.facebook.com/tuan.trananh.0509
    🚀Blog: https://evondev.com
    🚀Nhóm của mình: https://www.facebook.com/groups/2565163230401512
    🚀Học online với mình: https://www.facebook.com/messages/t/tuan.trananh.0509
    👉 Theme: Evondev Dracula
    👉 Font chữ: SF Mono, 14px
    👉 Extension VSCode: Evondev Dracula, Evondev Snippets, Prettier, Material Icon, Highlight Matching Tag, Bracket Pair Colorizer, HTML Snippets, Live Server, Live Server Preview
    👉 Extension Chrome: Eye Dropper color picker Chrome Extension, color slurp MacOS, visBug Chrome Extension
    👉Source code tại đây: https://github.com/evondev/youtube
    👉Extension gõ pháo hoa: Powermode

Chỉnh sửa Hình ảnh trong CSS: Kết hợp các Kỹ thuật

  • Tác giả: code.tutsplus.com
  • Đánh giá: 4 ⭐ ( 4628 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hai bài hướng dẫn gần đây trong loạt bài này, chúng ta đã thảo luận cách các bộ lọc và các chế độ pha trộn có thể thay đổi hoàn toàn hình ảnh của chúng ta. Trong hướng dẫn này, tôi sẽ khái...

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

  • Tác giả: webfaver.com
  • Đánh giá: 3 ⭐ ( 1751 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.

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

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

Thủ Thuật CSS Dành Cho Các Newbie phần 2

  • Tác giả: codelearn.io
  • Đánh giá: 5 ⭐ ( 4565 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tiếp phần 1 của series Thủ Thuật CSS Dành Cho các lập trình viên frontend Newbie, tuần này mình sẽ tiếp tục cho ra phần 2 của loạt series này.

Bài 26: Hiệu ứng zoom và gradient trong css

  • Tác giả: goclamweb.com
  • Đánh giá: 5 ⭐ ( 3152 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng zoom và gradient trong css. Hai thuộc tính được sử dụng là transform:scale() và background-image: -webkit-linear-gradient(); Ngoài ra, thuộc tính box-size:border-box cũng được giới thiệu.

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

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 4216 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