Display Images in orginal view in landscape or portrait not stretch

user_13092010 0
Viewed 1311

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>
twitter-bootstrap css html php javascript
2 Answers

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

user_29841390

Dear @dylanjameswagner I want how to do it

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.

I tried many time but I can't, I want it show me like this enter image description here

as on image look I want to display portrait images on center of the frame which on both side left and right have a white space but If Images is landscape it showed me inside entire of the frame which is not display white space of both sides.

user_130920100
Related