Blog Preview Card

Community feedback

• 

  MikDra1•6,920

  @MikDra1Posted 3 months ago

  Nice one @jdcc1024 😀

  If this comment was useful please mark it as helpful 💗

  Here are tips from me:

  To truncate or crop the edges of an image using HTML and CSS, you can use a combination of overflow: hidden; with a container element that has a specific width and height. Here’s how you can do it:

  Method 1: Using a Container with overflow: hidden;

  HTML:

  <div class="image-container">
      <img src="your-image.jpg" alt="Truncated Image">
  </div>
  

  CSS:

  .image-container {
      width: 300px;  /* Desired width */
      height: 200px; /* Desired height */
      overflow: hidden;
      position: relative;
  }
  
  .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      /* You can also adjust the width and height to control how the image is cropped */
  }
  

  Method 2: Using object-fit: cover;

  If you want the image to automatically scale and crop itself to fit within the container, you can use the object-fit property.

  HTML:

  If you want the image to automatically scale and crop itself to fit within the container, you can use the object-fit property.
  

  CSS:

  .image-container {
      width: 300px;  /* Desired width */
      height: 200px; /* Desired height */
  }
  
  .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* This crops the image */
  }
  
  

  • Method 1: The container has a fixed size, and overflow: hidden; hides any part of the image that doesn't fit within the container's dimensions. You can adjust the width and height of the img tag to control the crop.

  • Method 2: object-fit: cover; ensures the image covers the entire container while maintaining its aspect ratio. The image is automatically cropped to fit the dimensions of the container.

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  JdccDev•60

  @jdcc1024Posted 3 months ago

  Hey @MikDra1, thank you for taking the time to write out an elaborate, detailed response to my question :)

  I hadn't known about object-fit before, but I'm happy to see the div container approach was on the right track. If I understand right, the object-fit corresponds closer to the image fill options seen on Figma and Framer. I'll try giving it a shot in one of the next challenges!

  0