CODEWITHSUNDEEP
javascriptphphtmlcsstwitter-bootstrap
Lan Danel
Lan Danel

Reputation: 53

Display Images in orginal view in landscape or portrait not stretch

I want to display many images in a container but if the image is landscape it's not bad but if the image is portrait when I insert it, it display stretched. it show every picture landscape, it's not beautiful. I want to show each images as it's original orientation and max height of the container is 415px. this is my output: landscape image portrait image please help this is my code.


<li class="main-image-set ">
    <a href="<?=get_image($product['image_one']);?>" class="thumbnail"  style="padding: 3px; width: 100%; max-height: 520px; height: auto;">
        <img src="<?=get_image($product['image_one']);?>" style="height: 414px"  >
    </a>
</li>

Upvotes: 2

Views: 2501

Answers (2)

Irfan Khan
Irfan Khan

Reputation: 1

You can use the css property as object-fit: cover; it will crop the portrait image but at least it wont stretch in an ugly way.

Upvotes: 0

dylanjameswagner
dylanjameswagner

Reputation: 552

First note: A portrait image will never fill the same space as a horizontal image without skewing the aspect ratio of the image, which is what you are seeing in your code/example.

Assuming the desired affect is to have them appear the "same size" you'll end up with an image item that is in a square. In your example .max-image-set

If you style a portrait and landscape with the same max-height your portrait image will have whitespace on the left and right side of it. Transversely if you style them with the same max-width you will have whitespace above and below a landscape image. (assuming they are in a square, and the desired affect is to have them appear the "same size")

.main-image-set a {
    display: flex; /* for alignment */
    justify-content: center; /* horizontally align portrait image */
    align-items: center; /* vertically align landscape image */


    /** fixed width, creates a square for our image to live */
    width: 414px;
    height: 414px;
    /* Could be styles with a responsive technique a like aspect ratio prop, but that is outside the scope of here */

    background-color: #eee; /* so you can see the "square", for demo purposes */
}

.main-image-set img {
    width: auto; /* to counter any width attributes and allow intrinsic image width */
    height: auto; /* to counter any height attributes and allow intrinsic height */
    max-width: 100%; /* scale with the parent element width */
    max-height: 100%; /* scale with the parent element height */
}

This will result in something like this...

enter image description here

Upvotes: 1

Related Questions