Thay đổi kích thước ảnh mà không bị méo css

Hướng dẫn cố định kích thước hình ảnh khi hiển thị, giúp website của bạn không bị lệch bố cục khi bạn up những hình ảnh kích thước lớn

Qua thời gian sử dụng người dùng sẽ dần cảm thấy nhàm chán với những cách bố trí hình ảnh, kích thước trên website của mình, nhưng không phải ai cũng có thể tự thay đổi đượckích thước hình ảnh cho website. Nhưng hôm nay Web+ sẽ hướng dẫn các bạn cách thay đổi kích thước hình ảnh cố định trên website của mình một cách đơn giản mà không cần phải biết đến lập trình...

BACKUP CẤU HÌNH GIAO DIỆN

Trước khi thay đổi bố cục và chỉnh sửa nội dung cho website các bạn đều phải backup cấu hình giao diện lại. Điều này giúp các bạn có thể khôi phục lại giao diện website bạn đầu nếu trong quá trình sửa chữa website có sảy ra lỗi hoặc chưa ứng ý với những thay đổi.
Để Backup cấu hình giao diện các bạn truy cập quản trị website, tại mục "Cài đặt chung"các bạn chọn "Sao lưu giao diện, cấu hình". Ngay lập tức hệ thống sẽ chuyển đến trang sao lưu giao diện cấu hình. Tại đây các bạn nhập tên fite vào ô tương ứng và click "Sao lưu giao diện cấu hình".

Thay đổi kích thước ảnh mà không bị méo css

Hướng dẫn Backup giao diện cấu hình

THAY ĐỔI KÍCH THƯỚC HÌNH ẢNH CỐ ĐỊNH TRÊN WEBSITE

Bước 1: Xác định khối chứa hình ảnh

Để xác định khối chứa hình ảnh bạn click chuột phải vào hình ảnh và chọn kiểm tra, hoặc ấn phím f12 trên bàn phím máy tính, ngay lập tức hệ thống sẽ hiển thị lên một màn hình chứa những khối HTML của website. Tại đây các bạn ấn tổ hợp phím Ctrl + Shift + C trên bàn phím và trỏ chuột vào khối chứa hình ảnh để xác định đoạn HTML của khối đó.

Thay đổi kích thước ảnh mà không bị méo css

Xác định khối html chứa hình ảnh

Bước 2: Css kích thước mới cho khối HTML chứa hình ảnh và thẻ chứa hình ảnh trong khối

Để CSS kích thước mới cho khối HTML bạn chỉ cần copy đoạn Css cũ của khối đó sau đó thay đổi kích thước mới vào và chèn thêm "!important" vào sau. Ngay lập tức bạn sẽ thấy kích thước của các khối trên website được thay đổi, Bạn copy đoạn css vừa thay lại và truy cập "Cài đặt chung" ở trang quản trị, và dán vào phần cấu hình CSS.

Thay đổi kích thước ảnh mà không bị méo css

Chèn đoạn CSS vào cấu hình CSS trong CÀI ĐẶT CHUNG

Sau khi chèn đoạn CSS vào phần Cấu hình CSS, bạn click vào lưu thay đổi và load lại website để kiểm tra. Dưới đây là video hướng dẫn cách thay đổi kích thước hình ảnh cố định trên website, các bạn hãy tham khảo và làm theo.

Nhiều trường hợp bạn phải thay đổi kích thước hình ảnh sao cho phù hợp với yêu cầu nào đó. Nhưng bạn không biết cách nào để thay đổi hình ảnh? Thì bài viết sau đây giúp bạn thay đổi hình ảnh mà không bị bóp méo ảnh khó nhìn nhé.

Mục Lục

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

Thay đổi kích thước hình ảnh bằng Photoshop

Sử dụng công cụ có sẳn trên hệ điều hành

Sử dụng Paint để thay đổi kích thước ảnh trên windows

Sử dụng Mac Preview để thay đổi kích thước trên macbook

Dùng một vài công cụ online để thay đổi kích thước hình ảnh

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

Tại bài viết này mình sẽ hướng dẫn bạn những cách sử dụng phần mềm cần cài đặt, phần mềm có sẳn trên hệ điều hành windows và các công cụ hỗ trợ online nhé.

Nên thay đổi kích thước hình ảnh bao nhiêu là phù hợp?

Vấn nạn hình nhỏ luôn là phần khó chịu nhất nhưng mà kích thước bạn lại yêu cầu lớn quá thì sẽ dẫn tới trường hợp ảnh bị nhèo nên bạn cần phải cân nhắt việc thay đổi kích thước hình ảnh nhé. Bạn chỉ nên thay đổi kích thước từ lên gấp 1.2 tới 1.5 thôi nhé.

Nếu bạn nào chưa biết về cách xem kích thước hình ảnh thì có thể xem tại: Cách xem kích thước hình ảnh

Nếu như do những nhu cầu cấn thiết thì bạn có thể xem qua bài viết: Cách tăng kích thước ảnh mà không bị vỡ

Nếu như bạn chưa biết cách tải hình trên website thì bạn có thể xem tại bài viết:

Thay đổi kích thước hình ảnh bằng Photoshop

Đối với một số bạn tập tành về Photoshop thì đây là một trong những kỹ năng không hề khó nhưng lại dễ dàng bị lỗi vì chưa nắm đúng kỹ thuật sẽ tạo ra các hình ảnh méo mó không phù hợp lắm. Vậy làm sao để đúng các kỹ thuật không sai một kích thước tương sứng ngang dọc với hình ảnh trước kia.

Đầu tiên bạn hãy mở hình trong photoshop bằng file => Open ( hoặc tổ hợp phím CTRL + O)

Thay đổi kích thước ảnh mà không bị méo css
Mở hình ảnh trong photoshop

Để thay đổi kích thước hình ảnh bạn hãy chọn Image => Image Size… (hoặc tổ hợp phím CTRL + alt + I)

Thay đổi kích thước ảnh mà không bị méo css
Chọn xem kích thước hình ảnh

Ngay lập tức bạn sẽ nhận được cửa sổ bao gồm các thông số kích thước hình ảnh. Width là chiều rộng, Height là chiều cao của ảnh hiện tại

Thay đổi kích thước ảnh mà không bị méo css
Xem kích thước hình ảnh

Sau đó bạn hãy kiểm tra mục Constrain Proportions đã tích chưa nhé. Nếu chưa bạn hãy tích vào mục này.

Thay đổi kích thước ảnh mà không bị méo css
Chọn thiết lập thay đổi tỉ lệ

Tiếp tới bạn hãy điền vô cột Width hay Height bất kỳ theo kích thước yêu cầu của bạn. Khi bạn điền 1 trong 2 ô này thì kích thước ô còn lại sẽ thay đổi theo đúng với chỉ số nhé.

Thay đổi kích thước ảnh mà không bị méo css
Nhập thông số thay đổi

Sau cùng bạn hãy lưu lại hình để xuất ra file bạn có thể dùng tổ hợp phím CTRL + S nhé.

Sử dụng công cụ có sẳn trên hệ điều hành

Sử dụng Paint để thay đổi kích thước ảnh trên windows

Paint là một trong những công cụ vẽ nhưng paint hay paint 3d không chỉ dừng tại đó bạn cũng có thể thay đổi hình ảnh bằng phần mềm có sẳn này nữa đấy.

Bạn hãy bật Paint lên. Sau đó bạn hãy mở hình ảnh trong paint. Bạn hãy chọn chuột phải vào hình ảnh sau đó chọn Open With và chọn Paint nhé

Thay đổi kích thước ảnh mà không bị méo css
Bật hình ảnh trong Paint

Sau đó bạn hãy chọn vào mục Resize trong thanh công cụ của paint

Thay đổi kích thước ảnh mà không bị méo css
Chọn Resize

Sau đó bạn nhận được cửa sổ Resize and skew bây giờ bạn hãy tích chọn Maintain aspect ratio. Bạn hãy điền vào kích thước cần thay đổi. Nếu như bạn chọn Percentage là hình ảnh phần trăm ảnh trước so với ảnh đã chuyển sau. Nếu bạn chọn Pixels là kích thước hình theo chuẩn kích thước PX. Sau khi điền sau bạn hãy nhấn OK là hình ảnh đã được thay đổi kích thước

Thay đổi kích thước ảnh mà không bị méo css
Nhập thông số thay đổi hình ảnh

Nếu như cần thiết bạn hãy lưu lại hình ảnh bằng CTRL + S nhé

Sử dụng Mac Preview để thay đổi kích thước trên macbook

Đối với một số bạn dùng macbook thì bạn có thể dùng phần mềm mac preview để thay đổi kích thước hình ảnh nhé.

Bước 1: Bạn hãy dùng Preview và chọn menu để chọn được hình ảnh muốn thay đổi

Bước 2: Sau đó bạn hãy chọn Tools => Adjust size. Sau đó bạn sẽ nhận được cửa sổ mới tên là Image Dimensions để bạn thay đổi kích thước hình ảnh.

Thay đổi kích thước ảnh mà không bị méo css
Thay đổi kích thước ảnh bằng mác preview

Lưu ý: Nếu như bạn không muốn ảnh bị méo mó bạn hãy tích chọn Scale proportionally nhé

Bước 3: Sau đó bạn hãy lưu lại hình ảnh bằng cách chọn File và chọn Save nhé.

Dùng một vài công cụ online để thay đổi kích thước hình ảnh

Hiện nay thời đại internet ngày càng tiên tiến thì rất nhiều công cụ thay đổi kích thước hình ảnh khác nhau. Những công cụ này cũng phần nào giúp bạn ít phải thao tác không bị nhầm lẫn các bước cho các bạn không chuyên nghiệp.

Một vài công cụ thay đổi kích thước hình ảnh online:

Thay đổi kích thước ảnh mà không bị méo css
Thay đổi kích thước ảnh bằng công cụ online
  • Pixlr: https://pixlr.com/
  • Iloveimg: https://www.iloveimg.com/
  • Picresize: https://picresize.com/vi
  • Hipdf: https://www.hipdf.com/

Những công cụ này đều có khả năng thay đổi kích thước hình ảnh theo nhu cầu của bạn và có thể cho phép bạn tải tệp tin và xuất tệp tin từ nhiều nguồn khác nhau như: Máy tính, url, một số phần mềm đám mây.

Trên đây là những phần mềm giúp bạn có thể thay đổi kích thước hình ảnh hiện tại trên máy tính dễ dàng và không gặp phải những lỗi bị méo mó hình ảnh. Chúc các bạn thành công nhé