CSS - smaller image in proportion for content property

0 votes
76 views
added Oct 27, 2023 in CSS by lcjr First Warrant Officer (11,930 points)

If you want to make the image smaller in proportion (reducing its width but keeping the aspect ratio), you can use the content property with the url() function inside a ::before pseudo-element, but you'll need to use additional CSS rules to control the size. You can use the background-image property for this purpose, as it allows you to manipulate the size more easily. Here's how you can do it:

.yourcategory::before {
    content: "";
    background-image: url(images/icons/ico_lr.png?=v1);
    background-size: 24px auto;
    width: 24px;
    height: 24px;
    display: inline-block;
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...