Home > Article > Web Front-end > How to shrink an image using CSS to make it responsive

How to shrink an image using CSS to make it responsive

王林forward: 2023-08-23 20:05:021168browse

To make the image responsive, you can try running the following code:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            max-width: 100%;
            height: auto;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt = "Online Compiler" width = "300" height = "300">
   </body>
</html>

The above is the detailed content of How to shrink an image using CSS to make it responsive. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What is the box model in CSS?Next article：What is the box model in CSS?

See more

How to shrink an image using CSS to make it responsive

Example

Related articles