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

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 số 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 cho 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ử mẹ. Đ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
  • id = “resizing-background-image”> 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-

    • 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 để có thể nhìn thấy đầ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 phải nâng cấp hình ảnh hoặc cắt hình ảnh.

      & 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>, có 5 giá trị khác có thể có cho object-fit:

    • chứa : Nó giữ nguyên tỷ lệ co ban đầu của hình ảnh, nhưng hình ảnh được thay đổi kích thước. 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 để che 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ệ khung hình.
    • 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ó đang kéo dài đến chiều rộng tối đa có sẵn 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.

    object-fit: 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

    Bạn cần lưu ý những nhược điểm nhất định của việc thay đổi kích thước hình ảnh phía máy khách.

    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 cần 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 xuống 400px.

    < p> Bạn có thể thấy thời gian tải xuống này trên bảng điều khiển mạng, như thể hiện 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ể khác.

        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ên 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 cung cấp 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 xử lý và bộ nhớ 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, Không bao giờ được nâng cấp hình ảnh WebP hoặc AVIF 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 các 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 trong khi 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ủ đề thay đổi kích thước hình ảnh trong html

Hướng dẫn căn giữa hình ảnh website bằng html, css đơn giản, dễ hiểu| Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2019-04-21
  • Đánh giá: 4 ⭐ ( 8929 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong video này tôi hướng dẫn bạn cách chỉnh hình ảnh căn giữa nội dung website bằng html, css một cách dễ dàng chỉ sau một vài bước.
    ---
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youttube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen
    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn
    unitop hocwebdilam
    © Copyright Phan Văn Cương. Do not Reup

    Chào bạn, chúc bạn học tốt!

Chỉnh Kích Thước Ảnh Trong Html, Hướng Dẫn Resize Ảnh Không Bị Co Giãn Tỉ Lệ

  • Tác giả: vuihecungchocopie.vn
  • Đánh giá: 5 ⭐ ( 4712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta thấy ảnh ở hầu hết các trang web với những định dạng và kích thước khác nhau. Một số trang web sẽ xử lí hình ảnh trước khi upload lên (resize kích

cách đưa hình ảnh vào trang web của bạn

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

Chèn ảnh trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 4439 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu thẻ để chèn ảnh vào trang web, các thủ thuật chèn ảnh hiệu quả, tạo siêu liên kết cho ảnh, bản đồ ảnh, căn chỉnh ảnh với văn bản ...

CSS3: Sửa kích thước ảnh nền

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 4020 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính background-size của CSS3 cho phép chỉnh sửa kích thước ảnh nền của trang web theo ý của bạn một cách rất đơn giản mà không cần phải chỉnh sửa

Hình ảnh trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 3284 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hình ảnh trong HTML - Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Hướng dẫn thay đổi kích thước hình ảnh cố định trên website

  • Tác giả: biz24h.vn
  • Đánh giá: 4 ⭐ ( 6567 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

Xem Thêm  Cách căn giữa một hình ảnh trong HTML & CSS - css căn chỉnh trung tâm hình ảnh

By ads_php