Cắt và căn giữa cho hình ảnh bằng CSS3

Ở bài trước, chúng ta đã cùng nhau tìm hiểu cách cắt hình ảnh bằng Javascript /jquery rồi. Trong bài này, chúng ta sẽ cắt chúng bằng cách khác và chỉ dùng CSS mà thôi.

Ví dụ: ở đây mình có đoạn code hiển thị hình ảnh như sau:

<img alt="myimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwftWJ4IIqcuDvT_C_kHB8MUnVnWh2V8YdEOIM3clXUxUD5eS93-JGEbWydwpfs-EVSjs8zHw_nEzPCqFQszPnscd-78QvTMG1iHrsvi-6heYqAcGwLGVQgu6AfZB613UUpEsPobB1kQii/s1600/landscape-img.png" />

Thì khi hiển thị nó sẽ như sau:

Nếu để nguyên như vậy thì quá là to rồi, không phù hợp với blog được. Giờ ta sẽ dùng CSS để cắt và căn hình mà không làm co giãn hay méo ảnh nhé!

Cắt hình ảnh và căn giữa:

Giờ mình sẽ viết CSS cho class thumbnail-demo bao bên ngoài hình ảnh như sau:

.thumbnail-demo {
     position: relative;
     width: 300px;
     height: 200px;
     overflow: hidden;
}

Tiếp đến sẽ là CSS cho hình ảnh nằm bên trong class thumbnail:

.thumbnail-demo img {
     position: absolute;
     left: 50%;
     top: 50%;
     height: 100%;
     width: auto;
     -webkit-transform: translate(-50%,-50%);
           -ms-transform: translate(-50%,-50%);
                  transform: translate(-50%,-50%);
}

Và khi này hình sẽ được hiển thị như sau:

Rất đơn giản phải không ạ?