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 */
}
Are there any code examples left?
New code examples in category CSS
-
CSS 2022-03-27 22:50:16 make text bigger html5
-
CSS 2022-03-27 21:40:08 move list item to left css
-
CSS 2022-03-27 21:35:05 reduce image size css
-
CSS 2022-03-27 21:30:21 css image background center horizontally in div
-
CSS 2022-03-27 21:05:02 css button styles
-
CSS 2022-03-27 18:50:09 compass font awesome
-
CSS 2022-03-27 18:50:06 modal in materialize css
-
CSS 2022-03-27 17:55:12 box round corner css
-
CSS 2022-03-27 17:45:12 jquery add css
-
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio