Cách để hình ảnh scale full màn hình bằng CSS

Làm cách nào để mọi trình duyệt và thiết bị với các tỷ lệ màn hình khác nhau. Bức ảnh luôn được phủ tràn màn hình. Ở đây mình sẽ sử dụng CSS để xử lý tình huống này.
1. Chưa xử lý CSS

 .menus #site-user-profile {  
   background : url('../img/placeholders/menu/bg_user_profile.png');  
 }


Ở đây mình đã khoanh tròn bức hình khi chưa xử lí, vì độ rộng của hình ảnh nhỏ hơn so với màn hình nên hình ảnh đã bị lặp lại theo mặc định của thuộc tính background-image trong CSS.
2. Đã xử lý CSS

 .menus #site-user-profile {  
   background : url('../img/placeholders/menu/bg_user_profile.png') no-repeat center center;  
   -webkit-background-size: cover;  
   -moz-background-size: cover;  
   -o-background-size: cover;  
   background-size: cover;  
 }


Lúc này hình ảnh đã tự scale fullscreen.

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Upload và remove hình ảnh trong laravel

Trong bài này mình sẽ hướng dẫn các bạn viết 1 class dùng để upload và remove hình ảnh trong laravel.  - Đầu tiên ta tạo class Gallery và tạo 2 biến dùng để khai báo đường dẫn và nơi lưu trữ file. class Gallery { private $uploadDir; private $uploadFolder;  - Tiếp theo tạo hàm khởi tạo để set giá trị cho 2 biến trên. Ở đây mình sẽ lưu trong folder uploads: public function __construct() { $this->uploadDir = public_path('uploads'); $this->uploadFolder = 'uploads/'; } - Tiếp theo mình sẽ viết 1 số hàm cần thiết trong việc upload và xóa file. // Lay filename cua file khong chua phan dinh dang file private function getFileNamewithoutExtension($originalFileName, $extensionFileName) { return substr($originalFileName, 0, strlen($originalFileName) - (strlen($extensionFileName) + 1)); } //Kiem tra file ton tai hay khong private function isExistedFile($originalFileName) { return
Đọc thêm

Chuyển đổi HTML sang PDF sử dụng Javascript

Ngày này Javascript đang càng ngày càng phát triển rộng. Nó không còn đơn thuần chỉ dùng để làm những thứ cơ bản trên client-side. Mà giờ đây javascript còn có thể làm những thứ mà tưởng như chỉ có phía server-side (PHP, ASP.NET,..) mới làm được. Ở trong bài đăng này, mình sẽ hướng dẫn các bạn xuất 1 file từ định dạng HTML sang PDF. Ở đây mình sẽ dùng một số thư viện như: - Bootstrap ( https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ) - Jquery ( https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js ) - https://github.com/MrRio/jsPDF ( Dùng để tạo ra file PDF) - https://github.com/niklasvh/html2canvas ( Chuyển đổi HTML sang dạng hình ảnh, sau đó encode nó về dạng base64 như 1 kiểu string rôì dùng jsPDF chuyển ra file pdf). FULL Code : https://jsfiddle.net/CuongNguyen/y7uj5ns1/3/ HTML Code <body> <div id='area-print' class='container'> <div id='back-label'> <div class='row
Đọc thêm

Mã hóa dữ liệu trong Database

Đôi lúc vì một số lý do bảo mật mà bạn muốn các dữ liệu lưu trong database phải được mã hóa trước khi được lưu vào. Data Encryption and Decryption sử dụng AES (Advanced Encryption Standard) là phương thức phổ biến để thực hiện. Ở trong bài này, mình sẽ hướng dẫn cách sử dụng kĩ thuật này nhằm giúp cho database của bạn luôn luôn được mã hóa. Ví dụ: Tạo bảng user vs email và address sẽ luôn được mã hóa.  - Cấu trúc của table khi không được mã hóa: CREATE TABLE `user` ( `id` INT NOT NULL AUTO_INCREMENT , `email` VARCHAR(100) NOT NULL , `address` VARCHAR(100) NOT NULL , PRIMARY KEY (`id`) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8 COLLATE = utf8_general_ci - Cấu trúc của table khi email và address được mã hóa CREATE TABLE `user` ( `id` INT NOT NULL AUTO_INCREMENT , `email` VARBINARY(116) NOT NULL , `address` VARBINARY(116) NOT NULL , PRIMARY KEY (`id`) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8 COLLATE = utf8_general_ci Sự khá
Đọc thêm