Question 43033 in Html Question posted in
Some basic documentation can be found here.

Fitting images of varying sizes into div elements – Html

We are generating player images inside of circles, as such:

div.intable-player-image {
    border: 1px solid #666;
    border-radius: 50%;
    margin: 1px auto;
    max-height: 25px;
    overflow: hidden;
    width: 25px;
}
<div style="display: flex; width: 150px; ">
  <div class="intable-player-image" style="pointer-events: auto;">
    <a class="logo" href="/">
      <img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/105304-965025.png" alt="player-face" style="width: 100%;/* height: 100%; */">
      </a>
  </div>
  <div class="intable-player-image" style="pointer-events: auto;">
    <a class="logo" href="/">
      <img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/105676-963793.png" alt="player-face" style="width: 100%;">
    </a>
  </div>
  <div class="intable-player-image" style="pointer-events: auto;">
    <a class="logo" href="/">
      <img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104923-1321451.png" alt="player-face" style="width: 100%;">
    </a>
  </div>
</div>

The player images are all shapes and sizes. Some images have a greater width than height (first image), others have a greater height than width (2nd, 3rd image). Our goal is to display these as nicely-sized as possible with a one-size-fits-all approach.

In the example above, the 1st image is the main problem due to the white space showing. Any recommendations on how we can tweak the styles to improve the fit of the first image, without messing up the 2nd and 3rd images? As a bonus, having the player’s face in the 2nd image appear slightly larger would be an improvement to the current solution as well.

Tags:

2

Answers


  1. 0

    If you have an image nested in a div element all you need to do is set the max-width of the image to 100% it will be confined to the size of the div.

    <div>
  <img src="your-source" alt="dont-forget-good-alternative-text">
</div>

    div {
  width: 100px;
}

img {
  max-width: 100%;
}

    In the example above, the images max width would be dictated by the parent div, and wouldn’t grow larger than 100px.

    Login or Signup to reply.
  2. 0

    object-fit and object-position are used to control the positioning and scaling elements within their container.

    The object-fit property specifies how the image should be resized to fit its container, while preserving its aspect ratio.

    The object-position property defines the positioning of the image within its container.

    div.intable-player-image {
    border: 1px solid #666;
    border-radius: 50%;
    margin: 1px auto;
    max-height: 150px;
    overflow: hidden;
    width: 150px;
    display: block;
}

div.intable-player-image img {
  object-fit: cover;
  object-position: center 10%;
  width: 100%;
  height: 100%;
}
    <div style="display: flex; width: 500px; ">
  <div class="intable-player-image" style="pointer-events: auto;">

      <img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/105304-965025.png" alt="player-face" style="width: 100%;/* height: 100%; */">

  </div>
  <div class="intable-player-image" style="pointer-events: auto;">
    <a class="logo" href="/">
      <img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/105676-963793.png" alt="player-face" style="width: 100%;">
    </a>
  </div>
  <div class="intable-player-image" style="pointer-events: auto;">
    <a class="logo" href="/">
      <img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104923-1321451.png" alt="player-face" style="width: 100%;">
    </a>
  </div>
</div>

    In the example, object-fit: cover; is used to set the image to cover the entire container, while maintaining its aspect ratio. This means that the image will be scaled to fill the container while cropping any excess from either the width or height to fit perfectly inside the container div.

    object-position: center 10%; is used to set the image to center horizontally and 10% from the top of the container. This means that the image will be centered horizontally and the top 10% of the image will be cropped.

    Together, these properties ensure that the images are scaled to fit their container divs while preserving their aspect ratios and maintaining the desired positioning.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search