I have multiple images which I want to show using flexbox. But the images leave a gap if the next image cannot fit in the same row.
I want these images to resize accordingly so that there is no gap left.
Example:
HTML:
<div class="ImageContainer">
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/410/867/750/vector-forest-sunset-forest-sunset-forest-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/39/346/426/digital-art-men-city-futuristic-night-hd-wallpaper-thumb.jpg"
alt="">
</div>
</div>
CSS:
.ImageContainer{
margin:40px;
display: flex;
flex-wrap: wrap;
}
.ImageBlock{
margin:10px;
}
.ImageBlock img{
max-height: 250px;
}
You will need to add flex-grow: 1; to the .ImageBlock
This will make the block expand.
.ImageBlock {
margin: 10px;
flex-grow: 1;
}
Then you will have to make the img fill the block with width: 100%;
If you don't want the image to stretch out of proportions, you can use object-fit: cover;.
.ImageBlock img {
max-height: 250px;
width: 100%;
object-fit: cover;
}
Example codepen: https://codepen.io/bj-rn-nyborg/pen/rNMVrVL
Related
Here is a sample image of the layout I am trying to achieve with HTML and CSS:
From what the gallery looks like,
the images are placed in a row
each row fills the width of the container
each image fills the height of the row
The height of each row looks to be slightly different (e.g. min-height: 300px; max-height: 600px;) to accomadate for the different aspect ratios of the image.
I'm trying to build this layout with html and css flexbox, but haven't really gotten too far with it:
.gallery-container {
display: block;
margin: 0 auto;
width: 50%;
}
.gallery-row {
display: flex;
min-height: 300px;
max-height: 500px;
}
.gallery-img {
position: relative;
flex-grow: 1;
max-width: 33.3%;
}
.gallery-img img {
height: 100%;
}
<div class="gallery-container">
<div class="gallery-row">
<div class="gallery-img">
<img src="https://picsum.photos/200/300"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/300/200"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/400/200"/>
</div>
</div>
<div class="gallery-row">
<div class="gallery-img">
<img src="https://picsum.photos/400/300"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/100/200"/>
</div>
<div class="gallery-img">
<img src="https://picsum.photos/300/200"/>
</div>
</div>
</div>
I'm trying to simulate a shelf of books so that they look like this:
photoshop_mock_up
I can get the books to align just fine, but can't figure out how to make them retain their odd heights/widths, and not all just resize to the container:
HTML:
<div class="images-outer">
<div class="image-inner">
<img src="img/_0002_aristotle__poetics_and_rhetoric.png">
</div>
<div class="image-inner">
<img src="img/_0005_david_mamet__make_believe_town.png">
</div>
<div class="image-inner">
<img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
</div>
<div class="image-inner">
<img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png ">
</div>
</div>
CSS:
.images-outer {
height: 50%;
max-height: 50%;
display: flex;
vertical-align: bottom;
}
.image-inner img {
max-height: 100%;
}
img {
max-height: 100%;
}
This makes them look like this: web_page
Ideas?
In display: flex, you should use align-items to set vertical align and justify-content for horizontal align.
.images-outer {
height: 300px;
max-height: 50%;
display: flex;
align-items:flex-end;
justify-content:center;
background: black
}
.image-inner {
max-width:30px;
padding: 0px 5px;
}
.image-inner {
object-fit: contain;
object-position: bottom;
width: 100%;
}
<div class="images-outer">
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/240" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/180" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
</div>
</div>
.image-inner img{
width:100%;
height:auto;}
This should help in sizing the images properly
Else, you could dive each image an individual class and give each it's individual height.
I have this simple script where i have 2 responsive images. If you minimize the window you will that the images will accordingly.
But i put 2 images in the same div like this:
<div class="wrapper">
<div class="block">
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
</div>
</div>
i wont take the same effect, WHY?
https://jsfiddle.net/zqgy89k7/
Because you still had a width of 100% per image. Setting the width to 50% makes them scale again. Also set the height to auto to remain proportions.
See example below:
.wrapper {
box-sizing: border-box;
display: flex;
justify-content: center;
border: solid red;
}
.block {
display: flex;
width: 100%;
border: solid blue;
}
.block img {
width: 50%;
max-width: 400px;
height: auto;
}
<div class="wrapper">
<div class="block">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
</div>
You can comment the heigh: 200px line code. And that would be a solution.
Another one is to add flex-wrap: wrap to the flex-father container, and this would be visualy more likely.
Here is the example:
JS Fiddle with responsive images
I'm working in movie production website and trying to display movies images in equal size but i have different sizes of images and i need to place image in div like full size i.e all four corners should be zoomed in. Please help.
MY CODE
<div id="movies-images">
<img class="img-fluid" src="images/a4.jpg">
</div>
CSS :
#movies-images{
width: 100%;
height: 100%;
}
I want images to equal in width and height.
Try this:
.img-box {
display: flex;
justify-content: space-between;
}
.movies-images {
width: 33%;
height: auto;
}
.movies-images img {
width: 100%;
display: block;
}
<div class="img-box">
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
</div>
I need to align images like this photo. My code is:
<html>
<head>
<style>
.main
{
width: 634px;
height: 634px;
}
.img1
{
width: 315px;
height: 315px;
}
</style>
</head>
<body>
<img src="photo/01.jpg" class="main"><br>
<img src="photo/05.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
</body>
</html>
I want to create instaframe effect on html page. But I cant add images to the right side
You can use floating to achieve your desired effect:
.main {
width:80%; /* width can be anything */
overflow:auto; /* clears floating */
}
.main img {
width:33.33%; /* images are responsive, usually 3 images per row (33.33) */
height: auto; /* resize height based on width to keep image proportion */
float:left; /* float images to the left */
border:2px solid white; /* optional border */
box-sizing:border-box; /* makes sure border does not break total width */
}
.main img.big {
width:66.66%; /* big image takes 2/3 of grid size, so 66.66 of 100 */
}
<div class="main">
<img src="https://placehold.it/100x100" class="big">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
</div>
It is best to wrap the floated elements inside a common parent so that they do not affect the rest of page elements. In this case, the parent is <div class="main">.
jsFiddle
You can use CSS3 flexbox to achieve this;
See code below; you probably also want to use % or ems instead of fixed height/width;
using float as per answer above is more beautiful of course, flexbox is just one more way to achieve same results
Demo: jsFiddle
.main {
width: 300px;
height: 300px;
}
.img {
width: 150px;
height: 150px;
}
.rowContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.columnContainer {
display: flex;
flex-direction: column;
}
.mainContainer {
width: 450px
}
<div class="mainContainer">
<div class="columnContainer">
<div class="rowContainer">
<img class="main">
<div class="columnContainer">
<img class="img">
<img class="img">
</div>
</div>
<div class="rowContainer">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
</div>
</div>
</div>