Đoạn code jQuery chuyển thẻ img thành div và style background

23rd Jul 2021
Table of contents
  • IE 8,9,10,11 and EDGE detection
  • used in Bootrap 4
  • take the height of its parent div
  • cliped vertically at 20% of top and horizontally 50% (better for portraits)

Chúng ta có logic như sau. Và yêu cầu chuyển thành style có propertly là background-image: url

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

This is code

$('.post-thumb img').each(function(){           // Note: {.post-thumb img} is css selector of the image tag
    var t = $(this),
        s = 'url(' + t.attr('src') + ')',
        p = t.parent(),
        d = $('<div></div>');
        'height'                : 260,          // Note: You can change it for your needs
        'background-size'       : 'cover',
        'background-repeat'     : 'no-repeat',
        'background-position'   : 'center',
        'background-image'      : s

parent div:

height: 584px;
display: block;
background-position: center center;
background-size: cover;
width: 100%;
position: absolute;
overflow: hidden;
background-color: #fff;

child img

object-position: center center;
min-height: 100%;
display: block;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
width: auto;
min-width: 100%;
max-width: none;
-o-object-fit: cover; // you can keep them for modern browsers
object-fit: cover; // you can keep them for modern browsers
height: 100%;
Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

Hotspots are visual indicators applied over an image with a call to action (hyperlink, tooltip, modal). In this example we’ll be adding CSS hotspots to a responsive image that highlights some features of a car interior.

Bao gồm các kiểu trong phần đầu và tập lệnh vào phần cuối của thẻ nội dung.

Hướng dẫn làm Swiper slides with filters trong jQuery. Chức năng dùng khá nhiều trong các dự án

This video starts by quickly walking you through the common pitfalls of creating animation sequences by simply setting delays.

TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time