CODEWITHSUNDEEP
htmlcssimage
ofmiceandmoon
ofmiceandmoon

Reputation: 596

scale dynamic created images to their original size

I have a row of pictures that have to be next to each other (the first one is on the left).
The Problem I'm facing is their size, they all have the same height when I need them to have their original.

Here is the syntax and the css:

<div class="header">
  <div class="img-title">
    <img src="http://www.example.com/example.gif" />
  </div>
  <div class="logos">
    @if (!empty($var) && empty($param))
      @foreach ($var as $key => $value)
        @if (!is_numeric($key))
          <img src="http://www.example.com/{{$key}}.gif" />
        @endif
      @endforeach
    @endif
  </div>
</div>


.header {
  width: 100%;
  margin: 0;
  padding: 1em 0;
  display: flex;
  justify-content: flex-end;
}
.img-title:first-child {
  margin-top:auto;
  margin-bottom: auto;
  margin-right: auto;
}
.logos {
  display: flex;
  flex-wrap: wrap;
  float: right;
}
img {
 margin: 0px 3px;
 width: auto;
 max-width: 100%;
 max-height: auto;
}

How do I get them to have the same height and width they actually have?

Upvotes: 0

Views: 21

Answers (1)

MarioD
MarioD

Reputation: 1703

The issue is happening because you have display: flex; on .logos and haven't set a align-items value. To fix this you can set align-items: flex-start;, align-items: flex-end; or align-items: center; on your .logos container.

Align Items "The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that."

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Upvotes: 1

Related Questions