CSS tricks - Resolving Size and Background Challenges with CSS Properties

Sureshkannan M — Wed, 19 Jul 2023 16:52:36 +0000

As a frontend developer, one common issue we encounter is when clients provide logos with different sizes and backgrounds for placement on websites. This can lead to inconsistencies in appearance. An example of this issue is shown below:

To address the problem of varying image sizes, we can utilize the following CSS property to ensure the logos fit properly within their containers while maintaining their aspect ratios:

  img {
  object-fit: contain;
  aspect-ratio: 3/2;
}

By applying object-fit: contain;, the image size will adjust to fit within the container, and the aspect ratio will be preserved. This results in a more visually pleasing display:

However, even with fixed image sizes, we may still encounter situations where the logo backgrounds do not blend well with the container. To address this, we can use the following CSS properties:

   background-blend-mode: soft-light;
   mix-blend-mode: darken;

By applying background-blend-mode: soft-light; and mix-blend-mode: darken;, we can blend the logo image with the background color, ensuring a harmonious appearance:

It's important to note that these CSS properties, background-blend-mode and mix-blend-mode, may not be suitable for all image types or use cases. You can experiment with different property values to achieve the desired results.

By exploring the potential of these CSS properties, we can enhance the visual consistency of logos with various sizes and backgrounds on websites.
Sample Repo

DEV Community: Sureshkannan M

CSS tricks - Resolving Size and Background Challenges with CSS Properties