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/AVvXsEjne1MTpNAV2QTnhlORQpaRKl28sfRnl8SA1mmkLGYTR4GWjhLRVKM8SugIEGn3Oh-5eTeto2diL0pMbjJZbBoO2WRClZ200i-xsbBCAxWWl2LldgqxEu-7CtH8mC8mSZ-IOIEo_Rq5r_zn/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 ạ?

Hướng dẫn cắt ảnh bằng Jquery

Như các bạn cũng thấy, Với template mặc định của Blogger hay là 1 số Tempalte được chia sẻ trên mạng thì hình ảnh Thumbnail của bài viết 1 là sẽ có kích thước ảnh là 72x72 hoặc sẽ là full kích thước của ảnh luôn. Như vậy thì khá là bất tiện và thân thiện với trang web của chúng ta.

Chúng ta đang loay hoay trong việc chỉnh sửa CSS để làm sao cho nó thật đẹp thật vừa vặn? Nhưng tiếc là nếu thumbnail có kích thước là 72x72 thì chẳng thể nào làm nó to lên được vì nếu cho giãn ra thì sẽ bị nhòe hình. Còn nếu là ảnh full thì load trang sẽ rất nặng về hình ảnh.

Vì vậy mình sẽ quyết định chia sẻ cho các bạn 1 đoạn js nhỏ để cắt hình ảnh theo ý thích của mình. Bạn hãy copy và chèn đoạn Javascript sau đây vào trên thẻ </head> và cảm nhận nhé!

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
    <script type='text/javascript'>
        // < ![CDATA[$(document).ready(function () {
            var w = 340;
            var h = 150;
            $('.secondary-post').find('img').each(function (n, image) {
                var image = $(image);
                image.attr({
                    src: image.attr('src').replace(/s\B\d{2,4}/, 'w' + w + '-h' + h + '-c')
                });
                image.attr('width', w);
                image.attr('height', h);
            });
        });
        //]] >
    </script>

Nhớ thay đổi 340 và 150 thành con số phù hợp với Template của bạn nhé!