Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
img {max-width:100%;}
is one way of doing this. Just add it to your CSS code.
http://jsfiddle.net/89dtxt6s/
Maintain image aspect ratio when changing height
For img tags if you define one side then other side is resized to keep aspect ratio and by default images expand to their original size.
Using this fact if you wrap each img tag into div tag and set its width to 100% of parent div then height will be according to aspect ratio as you wanted.
http://jsfiddle.net/0o5tpbxg/
* {
margin: 0;
padding: 0;
}
.slider {
display: flex;
}
.slider .slide img {
width: 100%;
}
Flexbox Grid with Images - Maintain Aspect Ratio / Proportions
An initial setting of a flex container is align-items: stretch
. This means that flex items will expand, by default, to cover the full length of the cross axis of the container.
Consider overriding the default with align-items: flex-start
.
container .item {
display: flex;
align-items: flex-start; /* new */
}
revised codepen
CSS - Keep image aspect ration flexbox
Unless you have very specific requirements, I suggest Masonry:
a JavaScript grid layout library. It works by placing elements in
optimal position based on available vertical space, sort of like a
mason fitting stones in a wall. You’ve probably seen it in use all
over the Internet.
in combination with imagesLoaded For a versatile lightweight solution.
There are many ways to implement Masonry.
The following is my personal favorite.
All my comments are inside the snippet below
body { background: #131418;}
/* Step 1: start with resetting some defaults */
* { margin: 0 auto; padding: 0; max-width: 100%;}
/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/
.grid { text-align: center; max-width: 95vw; margin: 2.5vw auto;}
/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */
.grid-item { padding: 5px; box-sizing: border-box;}
/* Step 4: Add media queries (subjective) to make the whole grid resposive. */
@media (min-width: 500px) { .grid-item { width: 50%; }}
@media (min-width: 1000px) { .grid-item { width: 33.333%; }}
@media (min-width: 1700px) { .grid-item { width: 25%; }}
@media (min-width: 2100px) { .grid-item { width: 20%; }}
<!-- Made possible by the great work of David DeSandro @ https://masonry.desandro.com -->
<!-- Part 1: Add the scripts -->
<!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded --><script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<!-- Step 3: we load masonry --><script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- Part 2: Create the grid -->
<!-- Step 1: Start with a the main grid wrapper--><div class="grid">
<!-- Step 2: Add grid items--->
<div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" /> </div>
<div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg"> </div>
<!-- Step 3: repeat...---> <div class="grid-item"> <img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg"> </div>
<div class="grid-item"> <img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" /> </div>
<div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" /> </div>
<div class="grid-item"> <img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" /> </div>
<div class="grid-item"> <img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" /> </div>
<div class="grid-item"> <img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" /> </div>
<div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" /> </div>
<div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" /> </div>
<div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" /> </div>
</div>
<!-- Part 3: the script call -->
<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. --><script> $(".grid").imagesLoaded(function() { $(".grid").masonry({ itemSelector: ".grid-item" }); });</script>
Related Topics
How to Change a Span to Look Like a Pre with CSS
Overriding CSS Properties for a Specific HTML Element
Responsive Order Confirmation Emails for Mobile Devices
How to Make a Div with Arrowlike Side Without CSS Border Tricks
Why Does Naming Your HTML Form Submit Button "Submit" Break Things
How to Control The Width of a Label Tag
Can You Tab Through All Radio Buttons
Exclude Element with Fixed Positioning from Justify-Content in Flex Layout
How to Remove The Dotted Line Around The Clicked a Element in HTML
Display Background Color for The Page & Align Texts at Center
Word Wrapping for Button with Specified Width in IE7
Select Label Using CSS Selector
Detecting Real Time Window Size Changes in Angular 4
How to Remove The Default Link Color of The HTML Hyperlink 'A' Tag