CODEWITHSUNDEEP
javascriptjquerycss
Anna_B
Anna_B

Reputation: 890

Get exactly the same image sizes horizontally and vertically (Special case)

I want to create a special image gallery. All images should have the same size, but some are in portrait format, and some are in landscape format. Example: If the landscape format image is 500px wide and 300px high, the portrait format image should be 300px wide and 500px high. But the layout shouldn't be based on pixel values, and also not on vw or vh.

In the last hours, I tried to get the correct dimensions with percentage adjustments. But it's always a bit different in different browsers and browser sizes.

What I need: The (flexible) height of .vertical should be the width of .image. So it should impact the same pixel value.

Is that possible with CSS? Or maybe with jQuery?

Ah, and it's important to keep this width: calc(50% - 28px);.

Would be very thankful for help!

.image-gallery {
  width: 70%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: flex-start;
  background: darkgrey;
}

.image {
  width: calc(50% - 28px);
  margin: 20px;
}

.vertical {
  width: calc(72.3% - 28px); /* Instead of this, I need here the (flexible) height of  ".image" */
}

img {
  width: 100%;
  float: left;
}
<div class="image-gallery">

  <div class="image">
    <img src="https://cassandraladru.com/wp-content/uploads/2018/03/AnnieRob_FINALS-434.jpg" />
  </div>

  <div class="image vertical">
    <img src="https://cassandraladru.com/wp-content/uploads/2018/03/AnnieRob_SP-43-1616x1080.jpg" />
  </div>

</div>

Upvotes: 0

Views: 375

Answers (1)

user13046635
user13046635

Reputation:

Please try the following code.

.image-gallery {
    width: 70vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: flex-start;
    background: darkgrey;
}

.image {
  width: calc(50% - 28px);
  margin: 20px;
}

.vertical {
    width: auto;
}

img {
  width: 100%;
  float: left;
}

.vertical img{
    max-height: 100%;
    width: auto;
}

Since all images will have same size, vertical image will have width of image as height. According to your css, normal image (portrait image) will have (35vw - 28px) width because .image-gallery has 70vw width. So vertical image will have 35vw-28px as height. Please try my code and if you have any question, please comment me.

UPDATE

Added jQuery code.

<script>
    $(window).resize(function(){
        $('.vertical').height($('.image:not(.vertical)').width());
    }).trigger('resize');
</script>

Upvotes: 1

Related Questions