w3resource

HTML-CSS: Fit image in container

HTML-CSS : Exercise-38 with Solution

Using HTML, CSS fits an positions an image appropriately inside its container while preserving its aspect ratio.

  • Use object-fit: contain to fit the entire image within the container while preserving its aspect ratio.
  • Use object-fit: cover to fill the container with the image while preserving its aspect ratio.
  • Use object-position: center to position the image at the center of the container.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS fits an positions an image appropriately inside its container while preserving its aspect ratio</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<img class="image image-contain" src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-9.jpeg" /><!-- Comment: Inserts an image with class "image-contain" and sets its source -->
<img class="image image-cover" src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-9.jpeg" /><!-- Comment: Inserts an image with class "image-cover" and sets its source -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

  • HTML:
    • The DOCTYPE declaration specifies the document type and version of HTML being used.
    • <html>: Defines the root element of the HTML document.
    • <head>: Contains meta-information about the HTML document, such as the character encoding and viewport settings.
    • <meta charset="utf-8">: Specifies the character encoding of the document to UTF-8.
    • <meta name="viewport" content="width=device-width">: Sets the viewport width to the width of the device.
    • <title>: Sets the title of the HTML document.
    • <body>: Contains the content of the HTML document.
    • <img>: Inserts an image element.
    • class="image image-contain": Specifies classes for the image element, allowing CSS styling.
    • src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-9.jpeg": Sets the image source.
    • The second <img> element has similar attributes but with a different class name (image-cover).

    CSS Code:

    .image {
      background: #34495e; /* Comment: Sets the background color of the image */
      border: 1px solid #34495e; /* Comment: Sets a solid border around the image */
      width: 200px; /* Comment: Sets the width of the image */
      height: 200px; /* Comment: Sets the height of the image */
    }
    
    .image-contain {
      object-fit: contain; /* Comment: Specifies how the image should fit inside its container */
      object-position: center; /* Comment: Specifies the position of the image inside its container */
    }
    
    .image-cover {
      object-fit: cover; /* Comment: Specifies how the image should cover its container */
      object-position: right top; /* Comment: Specifies the position of the image inside its container */
    }
    

    Explanation:

    • CSS:
      • .image: Styles applied to all elements with the class "image".
        • background: Sets the background color of the image.
        • border: Sets a solid border around the image.
        • width: Sets the width of the image.
        • height: Sets the height of the image.
      • .image-contain: Additional styles applied to elements with the class "image-contain".
        • object-fit: Specifies how the image should fit inside its container. In this case, "contain" ensures that the entire image is visible while preserving its aspect ratio.
        • object-position: Specifies the position of the image inside its container. In this case, "center" horizontally centers the image.
      • .image-cover: Additional styles applied to elements with the class "image-cover".
        • object-fit: Specifies how the image should cover its container. In this case, "cover" ensures that the entire container is covered by the image while preserving its aspect ratio.
        • object-position: Specifies the position of the image inside its container. In this case, "right top" positions the image to the top right corner of its container.

      HTML-CSS Editor:

      See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.


What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.