0

I have the code bellow.

My issue is when the image is bigger than the parent height, it shrinks by height but not by width also.

I want the image to scale, and keep his ratio. For example the 150x150 and 100X100 images are not square.

.container{
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid green;
}

.items {
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    position: relative; 
    margin: 2px;
    }
.item {
    align-items: center;
    display: flex;
    height: 60px;
    justify-content: center;
    margin: 2px;
}
   
.item > * {
      cursor: pointer;
      display: flex;
      max-height: 100%; }
      
.item img {
      display: block;
      max-height: 100%; }
<div class="container">
<div class="items">
<div class="item" >
  <a href="#"><img src="https://via.placeholder.com/150">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/50">
</a>
</div>
</div>
</div>
user3541631
  • 3,686
  • 8
  • 48
  • 115
  • Possible duplicate of [How to get multiple images to auto resize and stay centered within a div](https://stackoverflow.com/questions/19896626/how-to-get-multiple-images-to-auto-resize-and-stay-centered-within-a-div) – Tygo Jan 23 '19 at 12:37
  • @Tygo the difference is that I'm trying to use flex on all elements, and not table, to make it later easy for responsive; another thing I don't have a predifined max-width – user3541631 Jan 23 '19 at 12:41
  • @user3541631 Yes, and that is the problem. The whole construct should be one flexbox. Remove `display:flex` from everything but `.items`. – Mr Lister Jan 23 '19 at 12:46
  • Not need height for .item. check the sample code https://codepen.io/balajidesigner/pen/XOJOBr If you have any concern let me know. – Balaji731 Jan 23 '19 at 12:59
  • @Balaji731, is not what I want, I want the bigger images to scale down, keeping the ration until they are inside the container – user3541631 Jan 23 '19 at 16:31

1 Answers1

1

I cut down alot of your css as I found alot of them redundant.

.container{
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid green;
}

.items 
{
    left: 0;
    top: 0;
    display: flex;
    height: 60px;
    flex-direction: row;
    padding: 0.5rem 0;
    position: relative; 
    margin: 2px;
}
.item 
{
    margin: 2px;
    height:100%;
}
   
.item img
{
      cursor: pointer;
      max-height: 100%;
      width:auto;
}
<div class="container">
<div class="items">
<div class="item" >
  <a href="#"><img src="https://via.placeholder.com/150">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/50">
</a>
</div>
</div>
</div>
boom
  • 184
  • 1
  • 9