flexbox align dynamic size image code example
Example: css flexbox image
/********** What to do in case of <div> containing images? ***********
In this case, the "flex" property is no longer effective in regulating
the size of the items (<div>) inside the container. This happens because
the size of the image itself will impact the <div>. So, to force the
image to fit the desired size, we need to do the following: */
.big_container {
display: flex;
flex-wrap: wrap;
}
div {
flex: 1;
}
img {
width: 100%; /* Make it occupy 100% of the size of the <div> */
min-width: 280px; /* Give it a minimum size so that it will wrap
instead of just shrinking */
}