Creating a Responsive Logo with CSS min() Function (No Media Query Involved)

CSSWeb DevelopmentFront End Technology

Using the CSS min() function, we can create a responsive logo in our webpages. It allows us to specify a minimum value to a CSS attribute.

Syntax

The syntax of CSS min() property is as follows −

Selector {
   attribute: min(/*value*/,/*value*/);
}

Example

The following examples illustrate CSS min() property.

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            float: left;
            height: min(40vw, 384px);
            margin: 3%;
         }
      </style>
   </head>
   <body>
      <div>
         <img src="https://images.unsplash.com/photo-1610672777263-9bab3d7947f0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=384&ixlib=rb-1.2.1&q=80&w=384" alt="bride-logo" />
         <h3>Responsive LOGO!</h3>
         <p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Praesent eleifend sodales orci, vel ornare sapien porta id. Pellentesque ipsum sem, aliquam vitae venenatis quis, lobortis vitae est. Proin a semper lectus. Nam rhoncus ipsum quis nisl porta pretium. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
         <p>
            Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere. Nulla nec nunc in dui aliquam congue. Nulla commodo tincidunt iaculis. Nulla egestas odio et arcu elementum euismod.
         </p>
      </div>
   </body>
</html>

This gives the following output

Example

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            margin: 2%;
            float: left;
            box-shadow: inset 0 0 22px green;
         }
         img {
            width: min(45vw, 512px);
            margin: 3%;
         }
      </style>
   </head>
   <body>
      <div>
         <img src="https://images.unsplash.com/photo-1611589694870-377ee3903be0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=512&ixlib=rb-1.2.1&q=80&w=512" alt="home" />
      </div>
      <h3>Another Responsive LOGO!</h3>
      <p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
   </body>
</html>

This gives the following output

raja
Published on 10-Feb-2021 13:28:26
Advertisements