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>
Related
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
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'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'd like to know, is it possible to change img dimensions while preserving its responsiveness on browser resize? Applying height and width doesn't work.
.wrap1 {
position: relative;
overflow: hidden;
}
.img1 {
height: auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="wrap1">
<img class="img1" src="http://lorempixel.com/600/400" alt="">
</div>
</div>
</div>
I created a responsive site but some of the images dont resize as I want them to.
See this screenshot:
#img1 {
width: 250px;
height: auto;
margin: auto;
display: block;
background-size: 20%;
}
<div class="row">
<div class="col-md-6" id="mision">
<img src="imagenes/MISION.png" id="img1">
</div>
<div class="col-md-6" id="vision">
<img src="imagenes/VISION.png" id="img2">
</div>
<div class="col-md-12" id="servicios">
<img src="imagenes/SERVICIOS.png" id="img3">
</div>
</div>
You're using a fixed width in the CSS for your image element, try changing to a percentage width, e.g.:
#img1{
width: 80%;
height: auto;
margin: auto;
display: block;
background-size:20%;
}
Then the width of the image should resize with your column.