Làm cách nào để thay đổi kích thước hình ảnh trong HTML? – cách thu nhỏ html hình ảnh

Tìm hiểu các kỹ thuật khác nhau để thay đổi kích thước hình ảnh trong HTML, khi nào bạn nên tránh thay đổi kích thước phía trình duyệt và cách phù hợp để thao tác và cung cấp hình ảnh trên web.

Bạn đang xem : cách thu nhỏ html hình ảnh

Nếu hình ảnh của bạn không phù hợp với bố cục, bạn có thể thay đổi kích thước hình ảnh trong HTML. Một trong những cách đơn giản nhất để thay đổi kích thước hình ảnh trong HTML là sử dụng các thuộc tính height width trên thẻ img . Các giá trị này chỉ định chiều cao và chiều rộng của phần tử hình ảnh. Các giá trị được đặt bằng px, tức là pixel CSS.

Ví dụ: hình ảnh gốc có kích thước 640 × 960.

  https: // ik .imagekit.io / ikmedia / women-dress-2.jpg  

Chúng tôi có thể kết xuất nó với chiều cao 500 pixel và chiều rộng 400 pixel

  & lt; img src = "https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
     width = "400"
     height = "500" / & gt;  

Nếu chiều cao và chiều rộng yêu cầu của phần tử hình ảnh không khớp với kích thước thực của hình ảnh, khi đó trình duyệt sẽ giảm tỷ lệ (hoặc nâng cấp) hình ảnh. Thuật toán chính xác được trình duyệt sử dụng để chia tỷ lệ có thể khác nhau và phụ thuộc vào phần cứng và hệ điều hành bên dưới.

Có một vài nhược điểm của việc thay đổi kích thước hình ảnh phía máy khách, chủ yếu là chất lượng hình ảnh kém và kết xuất hình ảnh chậm hơn. Để khắc phục điều này, bạn nên cung cấp hình ảnh đã được thay đổi kích thước từ máy chủ. Bạn có thể sử dụng Thumbor hoặc CDN hình ảnh miễn phí như ImageKit.io để thay đổi kích thước hình ảnh động bằng cách sử dụng các tham số URL.

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

Bạn cũng có thể chỉ định chiều cao và chiều rộng trong CSS.

  img {
  chiều rộng: 400px,
  chiều cao: 300px
}  

Giữ nguyên tỷ lệ co trong khi thay đổi kích thước hình ảnh

Khi bạn chỉ định cả hai height width , hình ảnh có thể bị mất tỷ lệ co. Bạn có thể duy trì tỷ lệ khung hình bằng cách chỉ chỉ định width và đặt height thành auto bằng thuộc tính CSS.

  img {
  chiều rộng: 400px,
  chiều cao: tự động
}
 

Điều này sẽ hiển thị hình ảnh rộng 400px. Chiều cao được điều chỉnh phù hợp để giữ nguyên tỷ lệ khung hình của hình ảnh gốc. Bạn cũng có thể chỉ định thuộc tính height và đặt width auto , nhưng hầu hết các bố cục thường bị hạn chế về chiều rộng chứ không phải chiều cao.

< h2 id = "responsive-image-which-Adjusts-based-on-available-width"> Hình ảnh đáp ứng điều chỉnh dựa trên chiều rộng có sẵn

Bạn có thể chỉ định chiều rộng theo tỷ lệ phần trăm thay vì số tuyệt đối. nó đáp ứng. Bằng cách đặt width thành 100% , hình ảnh sẽ tăng tỷ lệ nếu được yêu cầu để khớp với chiều rộng của phần tử chính. Điều này có thể dẫn đến hình ảnh bị mờ vì hình ảnh có thể được tăng tỷ lệ để lớn hơn kích thước ban đầu của nó.

  img {
  chiều rộng: 100%;
  chiều cao: tự động;
}
 

Ngoài ra, bạn có thể sử dụng thuộc tính max-width . Bằng cách đặt

  max-width: 100%;  

hình ảnh sẽ giảm tỷ lệ nếu nó phải, nhưng không bao giờ mở rộng quy mô để lớn hơn kích thước ban đầu.

  img {
  chiều rộng tối đa: 100%;
  chiều cao: tự động;
}
 

Cách thay đổi kích thước & amp; cắt hình ảnh để vừa với một vùng phần tử?

Cho đến nay, chúng ta đã thảo luận về cách thay đổi kích thước hình ảnh bằng cách chỉ định height hoặc width hoặc cả hai.

Khi bạn chỉ định cả height width , hình ảnh buộc phải vừa với kích thước được yêu cầu. Nó có thể thay đổi tỷ lệ khung hình ban đầu. Đôi khi, bạn muốn giữ nguyên tỷ lệ khung hình trong khi hình ảnh bao phủ toàn bộ khu vực ngay cả khi một số phần của hình ảnh bị cắt. Để đạt được điều này, bạn có thể sử dụng:

  • Hình nền
  • object-fit css thuộc tính

Thay đổi kích thước hình nền

background-image là một thuộc tính CSS rất mạnh cho phép bạn chèn hình ảnh trên các phần tử khác với img < / mã>. Bạn có thể kiểm soát việc thay đổi kích thước và cắt hình ảnh bằng cách sử dụng các thuộc tính CSS sau đây-

  • background-size - Kích thước hình ảnh
  • background-position – Vị trí bắt đầu của hình nền

kích thước nền
Theo mặc định, hình nền được hiển thị tại kích thước đầy đủ ban đầu. Bạn có thể ghi đè điều này bằng cách đặt chiều cao và chiều rộng bằng cách sử dụng background-size Thuộc tính CSS. Bạn có thể chia tỷ lệ hình ảnh lên hoặc xuống tùy theo ý muốn.

  & lt; style & gt;
.lai lịch {
  background-image: url ("/ image.jpg");
  background-size: 150px;
  chiều rộng: 300px;
  chiều cao: 300px;
  border: solid 2px red;
}
& lt; / style & gt;

& lt; div class = "background" & gt;
& lt; / div & gt;
 

Các giá trị có thể có của background-size :

  • auto – Hiển thị hình ảnh ở kích thước đầy đủ
  • length – Đặt chiều rộng và chiều cao của hình nền. Giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được cung cấp, giá trị thứ hai được đặt thành auto . Ví dụ: 100px 100px hoặc 50px .
  • phần trăm – Đặt chiều rộng và chiều cao của hình nền theo phần trăm của phần tử cha. Giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được cung cấp, giá trị thứ hai được đặt thành auto . Ví dụ: 100% 100% hoặc 50% .

Nó cũng có 2 giá trị đặc biệt chứa cover :

background-size: chứa
chứa – Nó giữ nguyên tỷ lệ khung hình ban đầu của hình ảnh, nhưng hình ảnh được thay đổi kích thước để hiển thị đầy đủ. Chiều dài hoặc chiều rộng dài nhất sẽ phù hợp với các kích thước đã cho, bất kể kích thước của hộp chứa.

  & lt; style & gt;
.lai lịch {
  background-image: url ("/ image.jpg");
  background-size: chứa;
  chiều rộng: 300px;
  chiều cao: 300px;
  border: solid 2px red;
}
& lt; / style & gt;

& lt; div class = "background" & gt;
& lt; / div & gt;
 

background-size: cover
cover – Nó giữ nguyên tỷ lệ co ban đầu nhưng thay đổi kích thước hình ảnh để bao phủ toàn bộ vùng chứa, ngay cả khi nó phải nâng cấp hình ảnh hoặc cắt nó.

  & lt; style & gt;
.lai lịch {
  background-image: url ("/ image.jpg");
  background-size: bìa;
  chiều rộng: 300px;
  chiều cao: 300px;
  border: solid 2px red;
}
& lt; / style & gt;

& lt; div class = "background" & gt;
& lt; / div & gt;
 

thuộc tính CSS object-fit

Bạn có thể sử dụng thuộc tính CSS object-fit trên phần tử img để chỉ định cách thay đổi kích thước hình ảnh & amp; được cắt xén để vừa với hộp đựng. Trước khi thuộc tính CSS này được giới thiệu, chúng tôi phải sử dụng hình nền.

Cùng với inherit , initial unset < / code>. rằng nó hoàn toàn có thể nhìn thấy được. Chiều dài hoặc chiều rộng dài nhất sẽ phù hợp với các kích thước nhất định, bất kể kích thước của hộp chứa.

  • cover : Nó giữ nguyên tỷ lệ co ban đầu nhưng thay đổi kích thước hình ảnh để bao phủ toàn bộ vùng chứa, ngay cả khi nó phải nâng cấp hình ảnh hoặc cắt nó.
  • fill : Đây là giá trị mặc định. Hình ảnh sẽ lấp đầy khu vực nhất định của nó, ngay cả khi điều đó có nghĩa là mất tỷ lệ co.
  • none : Hình ảnh hoàn toàn không được thay đổi kích thước và kích thước hình ảnh gốc sẽ lấp đầy khu vực nhất định .
  • scale-down : Nhỏ hơn trong số chứa hoặc không .
  • Bạn có thể sử dụng object-position để kiểm soát vị trí bắt đầu của hình ảnh trong trường hợp một phần bị cắt của hình ảnh đang được hiển thị. < / p>

    Hãy hiểu những điều này bằng các ví dụ.

    Chiều rộng ban đầu của hình ảnh sau là 1280px và chiều cao là 854px. Ở đây, nó được kéo dài đến chiều rộng khả dụng tối đa bằng cách sử dụng max-width: 100% .

      & lt; img src = "https: // ik.imagekit.io/ikmedia/backlit.jpg "
         style = "max-width: 100%;" / & gt;  

    object-fit: chứa

      & lt; img src = "https://ik.imagekit.io/ikmedia/backlit.jpg"
    style = "object-fit: chứa;
                chiều rộng: 200px;
                chiều cao: 300px;
                border: solid 1px #CCC "/ & gt;
     

    Tỷ lệ khung hình gốc của hình ảnh giống nhau, nhưng hình ảnh được thay đổi kích thước để có thể nhìn thấy đầy đủ. Chúng tôi đã thêm đường viền 1px xung quanh hình ảnh để thể hiện điều này.

    object-fit: cover

      & lt; img src = "https: // ik .imagekit.io / ikmedia / backlit.jpg "
    style = "object-fit: cover;
                chiều rộng: 200px;
                chiều cao: 300px;
                border: solid 1px #CCC "/ & gt;
     

    Tỷ lệ khung hình gốc được giữ nguyên nhưng để bao phủ toàn bộ khu vực, hình ảnh được cắt bớt từ bên trái và bên phải.

    đối tượng phù hợp: lấp đầy

     & lt; img src = "https://ik.imagekit.io/ikmedia/backlit.jpg"
    style = "object-fit: lấp đầy;
                chiều rộng: 200px;
                chiều cao: 300px;
                border: solid 1px #CCC "/ & gt;
     

    Hình ảnh buộc phải vừa với vùng chứa rộng 200px với chiều cao 300px, tỷ lệ co ban đầu không được giữ nguyên.

    object-fit: none

      & lt; img src = "https: // ik .imagekit.io / ikmedia / backlit.jpg "
    style = "object-fit: none;
                chiều rộng: 200px;
                chiều cao: 300px;
                border: solid 1px #CCC "/ & gt;
     

    object-fit: scale-down

      & lt; img src = "https: / /ik.imagekit.io/ikmedia/backlit.jpg "
    style = "object-fit: scale-down;
                chiều rộng: 200px;
                chiều cao: 300px;
                border: solid 1px #CCC "/ & gt;
     

    object-fit: cover và object-position : right

      & lt; img src = "https://ik.imagekit.io/ikmedia/backlit.jpg"
    style = "object-fit: cover;
         object-position: quyền;
                chiều rộng: 200px;
                chiều cao: 300px;
                border: solid 1px #CCC "/ & gt;
     

    Nhược điểm của việc thay đổi kích thước hình ảnh phía máy khách

    Có một số nhược điểm nhất định của việc thay đổi kích thước phía máy khách mà bạn cần lưu ý.

    1. Kết xuất hình ảnh chậm

    Vì hình ảnh có kích thước đầy đủ vẫn được tải trước khi việc thay đổi kích thước diễn ra trong trình duyệt, nên mất nhiều thời gian hơn để hoàn tất quá trình tải xuống và cuối cùng là hiển thị. Điều này có nghĩa là nếu bạn có một bức ảnh lớn 1,5 megabyte, 1024 × 682 mà bạn đang hiển thị ở chiều rộng 400px, thì toàn bộ hình ảnh 1,5 megabyte sẽ được khách truy cập tải xuống trước khi trình duyệt thay đổi kích thước nó xuống 400px.

    < p> Bạn có thể xem thời gian tải xuống này trên bảng điều khiển mạng, như được hiển thị trong ảnh chụp màn hình bên dưới.

    Mặt khác, nếu bạn thay đổi kích thước hình ảnh trên máy chủ bằng một số chương trình hoặc hình ảnh CDN , sau đó trình duyệt không phải tải một lượng lớn dữ liệu và lãng phí thời gian giải mã & amp; hiển thị hình ảnh.

    Với ImageKit.io, bạn có thể dễ dàng thay đổi kích thước hình ảnh bằng cách sử dụng tham số URL . Ví dụ: -

    Hình ảnh gốc
    https://ik.imagekit.io/ikmedia/women-dress-2.jpg

    < strong> Hình ảnh rộng 400px với tỷ lệ khung hình được giữ nguyên
    https://ik.imagekit.io/ikmedia/women-dress-2.jpg?<

      • / p>

        2. Chất lượng hình ảnh kém

        Thuật toán chia tỷ lệ chính xác được trình duyệt sử dụng có thể khác nhau và hiệu suất của nó phụ thuộc vào phần cứng và hệ điều hành cơ bản. Khi một hình ảnh tương đối lớn hơn được thay đổi kích thước để phù hợp với một vùng chứa nhỏ hơn, hình ảnh cuối cùng có thể bị mờ đáng kể.

        Có sự cân bằng giữa tốc độ và chất lượng. Sự lựa chọn cuối cùng phụ thuộc vào trình duyệt. Firefox 3.0 và các phiên bản mới hơn sử dụng thuật toán lấy mẫu lại song tuyến, được điều chỉnh cho chất lượng cao hơn là tốc độ. Nhưng điều này có thể thay đổi.

        Bạn có thể sử dụng thuộc tính CSS image-rendering , xác định cách trình duyệt sẽ hiển thị hình ảnh nếu nó được tăng hoặc giảm so với kích thước ban đầu.

          / * Giá trị từ khóa * /
        kết xuất hình ảnh: auto;
        kết xuất hình ảnh: sắc nét-các cạnh;
        kết xuất hình ảnh: pixelated;
        
        / * Giá trị toàn cầu * /
        kết xuất hình ảnh: inherit;
        kết xuất hình ảnh: ban đầu;
        kết xuất hình ảnh: unset;
         

        3. Lãng phí băng thông

        Vì hình ảnh có kích thước đầy đủ vẫn đang được tải, nó dẫn đến sự lãng phí băng thông, có thể đã được lưu. Truyền dữ liệu không hề rẻ. Ngoài việc tăng hóa đơn băng thông của bạn, điều này cũng khiến người dùng của bạn mất tiền thật.

        Nếu đang sử dụng CDN hình ảnh, bạn có thể giảm mức tiêu thụ băng thông của mình hơn nữa bằng cách phân phát hình ảnh ở các định dạng thế hệ tiếp theo < / span> ví dụ: WebP hoặc AVIF.

        Trang tổng quan thân thiện với người dùng cũng sẽ cho bạn biết bạn đã tiết kiệm được bao nhiêu băng thông cho đến nay

        Xem mức tiết kiệm thực tế trong trang tổng quan ImageKit

        4. Yêu cầu bộ nhớ và xử lý tăng lên trên các thiết bị khách

        Thay đổi kích thước hình ảnh lớn để vừa với một vùng chứa nhỏ hơn rất tốn kém và có thể gây khó khăn trên các thiết bị cấp thấp, nơi cả bộ nhớ và khả năng xử lý đều bị hạn chế. Điều này làm chậm toàn bộ trang web và làm giảm trải nghiệm người dùng.

        Tóm tắt

        Khi triển khai các trang web, hình ảnh cần phải phù hợp với bố cục một cách hoàn hảo. Dưới đây là những điều bạn cần nhớ để có thể triển khai các thiết kế đáp ứng:

        • Tránh thay đổi kích thước phía máy khách (trình duyệt) nếu bạn có thể. Điều này có nghĩa là cung cấp hình ảnh có kích thước chính xác từ máy chủ. Nó dẫn đến việc sử dụng ít băng thông hơn, tải hình ảnh nhanh hơn và chất lượng hình ảnh cao hơn. Có rất nhiều thư viện xử lý ảnh mã nguồn mở nếu bạn muốn tự thực hiện. Hoặc tốt hơn, bạn có thể sử dụng CDN hình ảnh miễn phí sẽ cung cấp tất cả các tính năng này và hơn thế nữa với một vài dòng mã.
        • Không bao giờ nâng cấp hình ảnh raster, tức là JPEG, PNG, Hình ảnh WebP hoặc AVIF không bao giờ được nâng cấp vì nó sẽ dẫn đến đầu ra bị mờ.
        • Bạn nên sử dụng định dạng SVG cho các biểu tượng và đồ họa nếu được yêu cầu ở nhiều kích thước trong thiết kế.
        • < li> Trong khi thay đổi kích thước, nếu bạn muốn giữ nguyên tỷ lệ co của hình ảnh gốc - Chỉ xác định một trong số width height và đặt cái kia thành auto .

        • Nếu bạn muốn hình ảnh vừa với toàn bộ vùng chứa mà vẫn giữ nguyên tỷ lệ co, ngay cả khi một số phần bị cắt hoặc hình ảnh được nâng cấp - Hãy sử dụng CSS object-fit hoặc đặt hình nền bằng thuộc tính CSS background-image .
        • Kiểm soát vị trí bắt đầu của hình ảnh bằng cách sử dụng object-position khi sử dụng object-fit . Trong hình nền, hãy sử dụng background-position .


    Xem thêm những thông tin liên quan đến chủ đề cách thu nhỏ html hình ảnh

    Cách thu nhỏ ảnh, thay đổi kích cỡ hình ảnh trên máy tính

    alt

    • Tác giả: Nguyễn Ngọc Việt
    • Ngày đăng: 2019-12-30
    • Đánh giá: 4 ⭐ ( 5858 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Không cần phần mềm chuyển nghiệp ta vẫn có thể thủ nhỏ hình ảnh hay thay đổi kích cỡ ảnh đơn giản với phần mềm paint có ngay trong máy tính.
      Hướng dẫn cách thủ nhỏ, thay đổi kích thước ảnh trên máy tính
      Bước 1: Kích chuột phải vào ảnh muốn thay đổi ta chọn Edit
      Bước 2: Tiếp đến chọn Resize để có thể thay đổi cỡ ảnh to hay nhỏ
      Bước 3: Giao diện Resize and Skew hiển thị ra thì ta kích sang mục Pixels và tùy chỉnh kích thước ở 2 mục Horizontal, Vertical.
      Bước 4: Chọn OK
      Một mẹo nhỏ giúp mọi người dễ dàng để có thể thay đổi được kích thước ảnh.

      ---------------------------------------------------------------------------
      Nếu các bạn thấy video hay đừng ngần ngại hãy click nút like và đăng kí theo dõi để mình có thêm động lực cho ra những video hay hơn cho các bạn. Cám ơn mọi người 🙂
      Kênh Hướng Dẫn nơi chia sẻ nhũng thông tin hữu ích về máy tính, phần mềm, word, excel...
      Đăng ký kênh miễn hoàn toàn phí tại: http://bit.ly/2vy8fNf
      ---------------------------------------------------------------------------
      Tham gia nhóm để được hỗ trợ về máy tính
      https://www.facebook.com/groups/thuth...
      ---------------------------------------------------------------------------
      Liên hệ
      FB CN: https://www.facebook.com/av.8888
      Web : http://kenhit.vn/

    [RWD Bài 4] Responsive hình ảnh (image) với HTML CSS

    • Tác giả: hocban.vn
    • Đánh giá: 3 ⭐ ( 6319 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Trong bài này chúng ta đi tìm hiểu về responsive hình ảnh (image) với HTML CSS trong Responsive Web Design.

    CSS thay đổi kích thước hình ảnh và giữ tỷ lệ khung hình

    • Tác giả: qastack.vn
    • Đánh giá: 3 ⭐ ( 9329 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; }

      This image is originally 400x400…

    Image Bootstrap

    • Tác giả: quantrimang.com
    • Đánh giá: 4 ⭐ ( 4203 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Ngoài việc làm cho ảnh trở nên thích ứng, trong bài viết này chúng ta cũng sẽ tìm hiểu về cách bo tròn góc cho ảnh, bo tròn ảnh, hình thu nhỏ (thumbnail), căn lề ảnh trong Bootstrap.

    Tạo hình thu nhỏ hình ảnh ở định dạng HTML

    • Tác giả: vie.moo0.com
    • Đánh giá: 3 ⭐ ( 3974 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Moo0 Image Thumbnailer (Miễn phí) - Tạo hình thu nhỏ hình ảnh ở định dạng HTML - Tạo hình thu nhỏ hình ảnh ở định dạng HTML

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

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

    Responsive Web Design trong HTML, tự động phóng to thu nhỏ trang web

    • Tác giả: thuthuat.taimienphi.vn
    • Đánh giá: 4 ⭐ ( 7274 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Responsive Web Design trong HTML, tự động phóng to thu nhỏ trang web

    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

    Xem Thêm  HTML - Biểu mẫu - cách thêm biểu mẫu trong html