I have photos that are a mixture of portrait and landscape and would like the container to accomodate either when uploaded,

```
height: auto 

```

will work for the first container (a portrait picture) but then stay the same height for the next container (landscape picture) but the width will change as its supposed to.

Here is a photo of what i mean...

[![enter image description here](https://i.stack.imgur.com/dWKY3.jpg)](https://i.stack.imgur.com/dWKY3.jpg)

Here is the html: 

```
      <div class="picture-holder">
        <div class="picture-single">
          <div class="picture-title">
            <p><%= count%>. <%= link_to "#{x.title}", picture_path(x.id) %> </p>
          </div>
          <div class="entry-image">
            <%= link_to picture_path(x) do %>
              <% if !x.image.landscape.url.nil? %>
                <% image_tag x.image.landscape.url %>
              <% else %>
                <% image_tag x.image.portrait.url %>
              <% end %>
            <% end %>
          </div>
          <div class="picture-details">
            <p>Uploaded by <%= link_to "#{x.user.username}(#{user_score(x.user.id)})", user_path(x.user) %> <br /><%= link_to "Comments(#{x.comments.count})", picture_path(x) %> </p> |
            <div class="">
              <% if is_yours?(x.id) %>
                <span class="text-green"> <%= link_to "Upvote", like_picture_path(x), method: :put %> </span>
                <span class="badge"><%= x.get_upvotes.size%></span>
                <span class="text-red"> <%= link_to "Downvote", unlike_picture_path(x), method: :put %> </span>
                <span class="badge"><%= x.get_downvotes.size%></span>
              <% else %>
                Upvote
                <span class="badge"><%= x.get_upvotes.size%></span>
                Downvote
                <span class="badge"><%= x.get_downvotes.size%></span>
              <% end %>
              <% if is_yours?(x.id) %>
                <span><p> <%= link_to "Report", new_report_path(:picture_id => x.id) %> </p></span>
              <% else %>
                <span class="text-red"><p> <%= link_to "Delete", picture_path(x), method: :delete %></p></span>
              <% end %>
            </div>
          </div>
        </div>
      </div>

```

Here is the css:

```
    .picture-holder{
      width: auto;
      height: auto;
      border: solid black;
      border-radius: 35px;
      background-color: white;
      margin: 60px 40px 0px 40px;
      display: flex;
    }

    .picture-single{
      width: auto;
      height: auto;
      margin-left: 5px;
      margin-right: 5px;
    }

    .picture-title{
      text-align: center;
      font-size: 1.5em;
    }

    .entry-image{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-bottom: 10px;
    }

    .picture-details{
      margin: 0px 30px 0px 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 0.8em;
      text-align: center;
    }

```

My css skills arent up to scratch (yet) and I can't find a solution, so any ideas on how to get the height to accommodate the container will be much appreciated. Thanks