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>
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 have a simple slick carousel
<div class="your-class">
<div class="slider">
<img src="assets/img/train.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/plane.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/truck.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/ship.jpg" alt="">
</div>
</div>
.slick-track {
display: flex !important;
}
.slick-slide {
height: inherit !important;
display: flex !important;
justify-content: center;
}
.slider {
max-height: 400px;
}
.slider img {
width: 100%;
height: auto;
}
As you can see I want to change the size of slider to 400px but the image looks flattened. If I remove slider height then the picture is too big with vertical scroll,I need to make img's height be approx 400px. Can you please help what I can do ?
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 have a container div with multiple varying-width, uniform-height images. The images are horizontally arranged with no gaps between them.
What I have so far:
#imageContainer {
width: 80%;
border: 1px solid blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#images {
display: flex;
width: 80%;
position: relative !important;
margin: 2px;
}
#imageContainer img {
display: inline-block;
position: relative;
margin: 1px;
}
<div id="imageContainer">
<div id="images">
<img src="https://dummyimage.com/400x100/000/fff" alt="">
<img src="https://dummyimage.com/320x100/000/fff" alt="">
<img src="https://dummyimage.com/420x100/000/fff" alt="">
<img src="https://dummyimage.com/540x100/000/fff" alt="">
</div>
</div>
I would like for all of the images to scale to fit within my div, filling it, but I can't seem to find where I can do this with multiple images.
I question is basically this one but with a twist of also scaling to fit.
Unless you want a gap in your box you should remove width/position from the inner #images container. To make the images scale down you can add a min-width. If you want the images to not distort add an object-fit:
#imageContainer {
width: 80%;
border: 1px solid blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#images {
display: flex;
margin: 2px;
}
#imageContainer img {
display: inline-block;
position: relative;
margin: 1px;
/* Important bits: */
min-width: 0;
object-fit: contain;
}
<div id="imageContainer">
<div id="images">
<img src="https://dummyimage.com/400x100/000/fff" alt="">
<img src="https://dummyimage.com/320x100/000/fff" alt="">
<img src="https://dummyimage.com/420x100/000/fff" alt="">
<img src="https://dummyimage.com/540x100/000/fff" alt="">
</div>
</div>
(Btw, centering using left + transform can cause blurriness in some rendering engines.)
I prefer using Bootstrap for most of my front-end styling as they provide lots of nifty "features" that make it easy for me to create a nice looking front-end without having to spend hours with CSS trying to get it looking perfect or making it scalable to multiple viewports.
Hence, here is how I would solve it using Bootstrap-4. (Here is a Codepen link)
<div class="container">
<div class="row outline-primary">
<div class="col">
<img src="https://dummyimage.com/400x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/320x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/420x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/540x100/000/fff" class="img-fluid h-100">
</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.