Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Object Fit and Object Position
#1
Description:

The object-fit property allows you to control how an image or video should be resized within its container, and object-position lets you specify where the image should be positioned.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Object Fit and Object Position Example</title>
  <style>
    .image-container {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      overflow: hidden;
    }
    .image {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Other values: contain, fill, etc. */
      object-position: right bottom;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img class="image" src="image.jpg" alt="Image">
  </div>
</body>
</html>

Explanation:

In this example, the .image-container div has a fixed width and height, and overflow: hidden is applied to hide any overflow from the image. The .image image inside the container is set to width: 100% and height: 100%, making it fill the container. The object-fit: cover property resizes the image to cover the entire container while maintaining its aspect ratio. The object-position: right bottom positions the image to the bottom-right corner of the container.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS Grid Masonry Layout Qomplainerz 0 643 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 433 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 377 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 358 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 366 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 362 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 370 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS Grid Auto-fit and Minmax Qomplainerz 0 348 07-26-2023, 07:41 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 376 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 336 07-26-2023, 07:05 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 4 Guest(s)