Replace the CSS which you’ve written for the images with the following one
article.product>section.gallery>img {
max-width: 100%;
max-height: 100%;
margin: auto;
}
The image takes up whichever attribute is larger i.e, width or height. The margin: auto takes care of positioning the image.
Snippet below:
article.product {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 0 1 auto;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
border: 10px solid rgba(230, 230, 230, 1);
margin-bottom: 10px;
}
article.product>section.gallery {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 0 1 auto;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
height: 70vh;
}
article.product>section.gallery>img {
max-width: 100%;
max-height: 100%;
margin: auto;
}
<article class=product>
<section class=gallery>
<img src="https://image-us.samsung.com/SamsungUS/mobile/phones/06102019-new/First_S10e_Lockup1_Black_gallery.jpg?$product-details-jpg$" />
<img src="https://corporate.bestbuy.com/wp-content/uploads/2018/02/STAR_blog_v01.jpg" />
<img src="https://i.insider.com/5c80383026289813a2172e82?width=1100&format=jpeg&auto=webp" />
</section>
</article>
JSFiddle link
Given a box, with a set width and height, say 70vh x 600px.
How can we make images inside that box, expand, scale up (and retain aspect ratio) to stop growing/scaling up when either edge of height or width are met.
That means you will always see the entire height and width of the image within that box.
Note that several img’s are contained within box side by side, so when we ‘scroll’ this ‘box’ we can always end up seeing the entire image.
Let me illustrate it in three images (comments under each):
First image above the images do not fill height or width but they keep aspect ratio.
Second, height is filled using stretching. Width seem to remain the same.
Third is what we desire regardless of set height of the outer box.
Commenting on the third using a video instead.
Please view it.
I show what I desire and what is the current problem.
Below is the code snippet showing number 3, css and html.
article.product {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 0 1 auto;
-ms-flex-direction:column;
-webkit-flex-direction:column;
flex-direction:column;
border:10px solid rgba(230, 230, 230, 1);
margin-bottom:10px;
}
article.product > section.gallery {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 0 1 auto;
-ms-flex-direction:row;
-webkit-flex-direction:row;
flex-direction:row;
overflow-x: scroll; -webkit-overflow-scrolling: touch;
}
article.product > section.gallery > img {
object-fit:contain;
object-position:0 0;
border:10px solid red;
min-height:80vh;
max-width:1180px;
max-height:80vh;
}
<article class=product>
<section class=gallery>
<img src="https://image-us.samsung.com/SamsungUS/mobile/phones/06102019-new/First_S10e_Lockup1_Black_gallery.jpg?$product-details-jpg$"/>
<img src="https://corporate.bestbuy.com/wp-content/uploads/2018/02/STAR_blog_v01.jpg"/>
<img src="https://i.insider.com/5c80383026289813a2172e82?width=1100&format=jpeg&auto=webp"/>
</section>
</article>
Run snippet in expanded mode and resize the height of the window.
EDIT
Updated snipped and created a new video. The problem is only that the height has a min-height.
Hi Allan, thanks, unfortunately it does not work 100%. Did you run the snippet in a full page mode? If so, try resizing height of the window. You will see image becoming smaller than the height of the box.
Height is not working properly in relation to box height.
Basically what i want is to set min-height, min-width, and then cancel one depending on the img ratio.
