CSS Style Image

This article is created to style image in multiple ways. Let's start with, how to define custom size to an image using CSS.

Define Image Size using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      img.first{width: 200px; height: 120px;}
      img.second{width: 120px; height: 200px;}
   </style>
</head>
<body>

   <h2>Original Image</h2>
   <img src="images/css-style-image-demo-image.jpg">
   
   <h2>Image with Size - width: 200px; height: 120px;</h2>
   <img src="images/css-style-image-demo-image.jpg" class="first">
   
   <h2>Image with Size - width: 120px; height: 200px;</h2>
   <img src="images/css-style-image-demo-image.jpg" class="second">
   
</body>
</html>

Output

Original Image

Image with Size - width: 200px; height: 120px;

Image with Size - width: 120px; height: 200px;

Resize Image Proportionally using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      img.firstImage{width: 220px;}
      img.secondImage{width: 220px; height: auto;}
      img.thirdImage{height: 220px;}
      img.fourthImage{height: 220px; width: auto;}
   </style>
</head>
<body>
   
   <h2>CSS Resize Image - width: 220px;</h2>
   <img src="images/css-style-image-demo-image.jpg" class="firstImage">

   <h2>CSS Resize Image - width: 220px; height: auto;</h2>
   <img src="images/css-style-image-demo-image.jpg" class="secondImage">

   <h2>CSS Resize Image - height: 220px;</h2>
   <img src="images/css-style-image-demo-image.jpg" class="thirdImage">

   <h2>CSS Resize Image - height: 220px; width: auto;</h2>
   <img src="images/css-style-image-demo-image.jpg" class="fourthImage">

   <h2>CSS Resize Image using Inline CSS - width: 120px;</h2>
   <img src="images/css-style-image-demo-image.jpg" style="width: 120px;">
   
</body>
</html>

Output

CSS Resize Image - width: 220px;

CSS Resize Image - width: 220px; height: auto;

CSS Resize Image - height: 220px;

CSS Resize Image - height: 220px; width: auto;

CSS Resize Image using Inline CSS - width: 120px;

Fit Image inside a Div using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 5px dotted red;}
      .firstDiv{width: 320px; height: 220px;}
      .firstDiv img{width: 320px; height: 220px;}
      .secondDiv{width: 220px; height: 180px;}
      .secondDiv img{width: 100%;}
   </style>
</head>
<body>
   
   <h2>CSS Fit Image Inside Complete Div</h2>
   <div class="firstDiv">
      <img src="images/css-style-image-demo-image.jpg">
   </div>

   <h2>CSS Fit Image Proportionally Inside Div</h2>
   <div class="secondDiv">
      <img src="images/css-style-image-demo-image.jpg">
   </div>
   
</body>
</html>

Output

CSS Fit Image Inside Complete Div

CSS Fit Image Proportionally Inside Div

Move Image to the Center of Screen Horizontally using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{text-align: center;}
      img{width: 120px;}
   </style>
</head>
<body>
   
   <div>
      <img src="images/css-style-image-demo-image.jpg">
   </div>
   
</body>
</html>

Output

Create Circular Image using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{text-align: center;}
      img{width: 160px; border-radius: 50%;}
   </style>
</head>
<body>
   
   <div>
      <img src="images/css-style-image-demo-image.jpg">
   </div>
   
</body>
</html>

Output

Create Rounded Image using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{text-align: center;}
      img{width: 160px; border-radius: 14px;}
   </style>
</head>
<body>
   
   <div>
      <img src="images/css-style-image-demo-image.jpg">
   </div>
   
</body>
</html>

Output

Note - More the value to border-radius, more the image becomes rounded.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!