Điều chỉnh hình ảnh tự động thay đổi kích thước để phù hợp với bài đăng Blogger

Bài viết cùng chuyên mục

Hình ảnh có thể không phù hợp với khu vực bài đăng trên Blog của bạn, đặc biệt khi bạn sử dụng Template Blogger mặc định . Trong bài viết này, tôi sẽ hướng dẫn cho bạn cách làm cho hình ảnh tự động thay đổi kích thước để phù hợp với khu vực bài đăng trên blog bằng cách sử dụng CSS.
Nếu những hình ảnh bạn đã tải lên trong blog của bạn lớn hơn diện tích bài đăng của bạn, thì rõ ràng là chúng sẽ thoát khỏi phạm vi khung bài đăng.
Xem hình ảnh bên dưới.

Làm thế nào để làm cho hình ảnh tự động thay đổi kích thước

Tôi sẽ hướng dẫn cho bạn hai phương pháp để làm cho hình ảnh bài đăng trên blog của bạn tự động thay đổi kích thước để vừa với khu vực bài viết Blogger

Phương pháp 1: Làm cho hình ảnh tự động thay đổi kích thước bằng cách sử dụng CSS

Trong menu bên trái, nhấp vào Chủ đề.
Nhấp vào Tùy chỉnh.
Trong menu bên trái, nhấp vào Nâng cao > Thêm CSS .

Khi bạn nhấp vào Thêm CSS , vùng CSS tùy chỉnh sau sẽ xuất hiện -
Thêm mã CSS  sau vào khu vực này và nhấp vào Áp dụng cho blog ở góc trên cùng bên phải. Tải lại trang blog của bạn để xem các thay đổi.

.post-body img {
  max-width: 100%;
  height: auto;
}

Bây giờ bạn sẽ thấy những hình ảnh đã được thay đổi kích thước

Phải làm gì nếu Mã CSS ở trên không hoạt động

Nếu mã ở trên không hoạt động các bạn sử dụng !important  ở cuối các giá trị mã CSS ở trên

.post-body img {
  max-width: 100% !important;
  height: auto !important;
}

Phải làm gì nếu hình ảnh Chứa đường viền 

Bạn có thể nghĩ rằng bạn đã hoàn thành, nhưng không thực sự, vẫn còn một vấn đề. Điều gì xảy ra nếu hình ảnh chứa đường viền như thế này

Nếu hình ảnh chứa border + padding sẽ mở rộng sang phải và chiếm một không gian  của khu vực bài đăng. Xem vào hình ảnh bên dưới -

Bạn thấy hình ảnh ở trên, khu vực được đánh dấu , thực sự chiếm một không gian không mong muốn và được mở rộng sang bên phải.
Để kiểm soát chúng hãy sử dụng CSS sau thay cho tất cả các mã ở trên.
Mã hoàn chỉnh (được khuyến nghị sử dụng) :

.post-body img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

max-width : Thuộc tính chiều rộng tối đa được sử dụng để đặt chiều rộng tối đa của một phần tử. Nếu bạn sử dụng max-width:100%;cho các phần tử img , hình ảnh sẽ mở rộng đến phần tử của chúng và không bao giờ chồng lên khu vực bài đăng trên Blog của bạn.
height : Nếu bạn sử dụng height:auto;chiều cao của hình ảnh sẽ được thay đổi kích thước tự động theo tỷ lệ chiều rộng của chúng.
Bx-sizing : Khi bạn sử dụng box-sizing:border-box;các giá trị đường viền được di chuyển bên trong hộp của phần tử,

Không nên sử dụng width: 100% để tạo hình ảnh

Một số người có thể đề xuất bạn sử dụng width: 100% để làm cho hình ảnh bài đăng trên blog của bạn được đáp ứng. Nhưng đừng bao giờ làm thế! Tôi sẽ giải thích với bạn tại sao.

• Thuộc tính chiều rộng : Nếu bạn sử dụng width: 100%, cả hình ảnh lớn hơn và nhỏ hơn sẽ được thay đổi kích thước thành vùng đăng của họ. Vì vậy, một hình ảnh nhỏ cũng sẽ mở rộng để lấp đầy khu vực đăng của nó và kết quả, hình ảnh sẽ bị mờ.
• Thuộc tính chiều rộng tối đa : Nếu bạn sử dụng thuộc tính max-width, chỉ các hình ảnh lớn hơn mới được thay đổi kích thước. 

Vui lòng xem hình ảnh sau đây để so sánh giữa các thuộc tính chiều rộng và chiều rộng tối đa -

Lưu ý: Bạn cũng có thể thêm mã trực tiếp vào Chỉnh sửa HTML của mình trước thẻ ]]></b:skin>. 

Phương pháp # 2: Thay đổi kích thước hình ảnh để phù hợp với bài đăng trên Blog của bạn

Để đổi kích thước hình ảnh bài đăng trên blog của bạn -

1. Vào bài đăng bạn muốn chỉnh.
2. Click vào hình ảnh đang hiển thị trong Trình chỉnh sửa bài đăng .
3. Một bảng sẽ xuất hiện, bây giờ bạn có thể thay đổi kích thước và căn chỉnh hình ảnh cho phù hợp.

Tôi khuyên bạn không nên tải lên các hình ảnh có kích thước rất lớn nó sẽ làm cho trang web của bạn nặng và mất nhiều thời gian hơn để tải.