Article Preview Component

Community feedback

• 

  Josh•1,110

  @josh76543210Posted over 1 year ago

  Hello @MadsenBK,

  Here is a solution to displaying the image:

  1. Wrap the <img> with <div> tags in the html.
  2. Set the height and width of the container and then set the image to 100% height of the container. The overflow: hidden property will prevent the part of the image that is outside the container from being displayed.

  <div class="card-img-container">
    <img
      src="images/drawers.jpg"
      alt="Green cabinet with drawers"
      class="card-img"
    />
  </div>
  

  .card-img-container {
    height: 32rem;
    width: 32.5rem;
    overflow: hidden;
  }
  
  .card-img {
    height: 100%;
    width: auto;
  }
  

  Check out my solution here if you want to see how I used this.

  Hope this helps. Happy Coding!

  Marked as helpful

  1

  ---

  

  BK Madsen•60

  @MadsenBKPosted over 1 year ago

  @josh76543210 That worked out perfectly. Thank you!

  0