I am trying to fit my images into the div which will be a inside a drag slider. I have tried a few object-fit properties but didnt seem to work. All of my images seem to take the entire width/height of the divs they are inside but I want there to be space between the images inside the div
<div class="homes-container">
<div class="home-container-item">
<div class="home-container-img">
<img src="./assets/content-images/desktop-development-1.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/desktop-development-2.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/desktop-development-3.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/desktop-development-4.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/mobile-development-1.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/mobile-development-2.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/mobile-development-3.jpg" alt="">
</div>
<div class="home-container-img">
<img src="./assets/content-images/mobile-development-4.jpg" alt="">
</div>
</div>
</div>
.homes-container{
position: absolute;
left: 10%;
top: 12%;
width: 80%;
height: 50rem;
overflow: hidden;
background: chartreuse;
}
.home-container-item{
position: absolute;
top: 0;
left: 0;
height: 100%;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 20px;
pointer-events: none;
transition: 1s;
object-fit: scale-down;
}
You can set the image style width and height to 100%. This should fill the div with the image.
<style>
img {
width: 100%;
height: 100%;
}
</style>
Related
ive been trying to make an infinite image slider with html and css, but everytime after the initial few photos are shown, there is a huge empty space before it starts appearing again, but 3 of the first photos dont show too. i can't seem to make it load infinitely like i want it to.
here's my html:
<div class="container">
<div class="banner">
<div class="profile">
<img src="img1.png" alt="">
</div>
<div class="profile">
<img src="img2.png" alt="">
</div>
<div class="profile">
<img src="img3.png" alt="">
</div>
<div class="profile">
<img src="img4.png" alt="">
</div>
<div class="profile">
<img src="img5.png" alt="">
</div>
<div class="profile">
<img src="img6.png" alt="">
</div>
<!---->
<div class="profile">
<img src="img1.png" alt="">
</div>
<div class="profile">
<img src="img2.png" alt="">
</div>
<div class="profile">
<img src="img3.png" alt="">
</div>
<div class="profile">
<img src="img4.png" alt="">
</div>
<div class="profile">
<img src="img5.png" alt="">
</div>
<div class="profile">
<img src="img6.png" alt="">
</div>
</div>
</div>
css:
.container{
height: 250px;
width: 90%;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
}
.banner{
position: absolute;
overflow: hidden;
white-space: nowrap;
display: flex;
width: calc(250px*12);
animation: scroll 40s linear infinite;
}
.profile{
height: 500px;
width: 150px;
display: flex;
align-items: center;
padding: 15px;
perspective: 100px;
}
.profile img{
width: 100%;
}
thank you in advance!
This method - where there are 2 copies of the elements and a translation of -50% (so the changeover is seamless) - does not work if the elements do not cover at least the full width of the parent.
There are fixed widths in the code given which make it non responsive and on some viewports the elements will not cover the width.
This snippet removes the fixed 150px and sets the width of each element to a proportion of the viewport width to ensure coverage. If you need the actual images to be less than that in width you can of course set their width back down to 150px.
You will need to work on vertical height. The profiles have a height larger than the parent but with overflow hidden. That is a different question from getting the carousel to work however.
The keyframes are simple - a translation from 0 to half the overall width, so that the second section of images is replaced by the first half when it reaches the left hand side so making things look continuous.
.container {
height: 250px;
width: 90%;
position: relative;
/* display: grid;
place-items: center; */
overflow: hidden;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner {
position: absolute;
overflow: hidden;
white-space: nowrap;
/*display: flex;
width: calc(250px*12);*/
animation: scroll 40s linear infinite;
font-size: 0;
/* to get rid of gaps between inline elements */
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.profile {
height: 500px;
/* width: 150px; */
width: calc(100vw / 5);
display: inline-flex;
align-items: center;
padding: 15px;
perspective: 100px;
font-size: initial;
}
.profile img {
width: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container">
<div class="banner">
<div class="profile">
<img src="https://picsum.photos/id/1015/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1016/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1015/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1016/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1015/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1016/200/300" alt="">
</div>
<!---->
<div class="profile">
<img src="https://picsum.photos/id/1015/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1016/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1015/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1016/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1015/200/300" alt="">
</div>
<div class="profile">
<img src="https://picsum.photos/id/1016/200/300" alt="">
</div>
</div>
This question already has an answer here:
Centre images with text below [duplicate]
(1 answer)
Closed 1 year ago.
Hi Im making a website for a school project and I need the images to be centered in the middle of the page with the text below. Right now the images and text are pushed to the left side. I need the images to be centered in the page and spread out, with the text still below.
HTML
<section class="middle">
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
</section>
CSS
.middle {
position: relative;
overflow: hidden;
}
.rowone {
float: left;
width: 200px;
margin: 1% 1% 45px 1%;
}
.text {
position: absolute;
bottom: 0px;
margin: 30px;
background-color: gray;
}
.rowone img {
width: 100%;
display: block;
}
This should do the trick.
HTML
<section class="middle">
<center>
<br>
<br>
<br>
<br>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
</center>
</section>
CSS
.middle {
position: relative;
overflow: hidden;
}
.rowone {
padding-left: 100px;
float: left;
width: 200px;
margin: 1% 1% 45px 1%;
}
.text {
position: absolute;
bottom: 0px;
margin: 30px;
background-color: gray;
}
.rowone img {
width: 100%;
display: block;
}
Take a look at following example. This can be comfortable solution for you. Image and Text are wrapped by .wrapper and
flex: 1; basically says, that all wrapper elements should have the same size within .rowone .
.middle {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.rowone {
display: flex;
}
.wrapper {
display: inline-block;
text-align: center;
max-height: 200px;
flex: 1;
}
.text {
background-color: gray;
}
img {
display: inline-block;
}
<section class="middle">
<div class="rowone">
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
</div>
</section>
Try to learn and use CSS Flex Container
Now your parent container .middle will look like this:
.middle{
display: flex; // this will help you align your elements.
justify-content: center; // with the center value, it will align your items at the center of your parent container.
align-items: center; // and this will align your items in the middle of the parent container which is what you're trying to achieve.
}
and you should leave out the float: left on your .rowone items. This is what makes your items be pushed on to the left side of the container.
I have used flex to spread out the images. I think it is the best way to divide a section into columns.
And a simple text align center for centered text.
JSFiddle
HTML
<section class="middle">
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
</section>
CSS
.middle {
/*position: relative;
overflow: hidden;*/
display: flex;
justify-content: space-between;
}
.rowone {
/*float: left;
width: 200px;
margin: 1% 1% 45px 1%;*/
text-align: center;
}
.text {
/*position: absolute;
bottom: 0px;
margin: 30px;*/
background-color: gray;
display:inline-block;
}
.rowone img {
width: 100%;
display: block;
}
Similar to this question, I want to create a perfect square grid, but inside of each grid cell, I want to place an image with 100% height.
The problem is because I did the padding-bottom: 100%; height: 0 hack, height: 100% no longer works on the image because the browser thinks the container has 0 height.
How can I set the height of the image to match that of the cell?
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
padding-bottom: 100%;
height: 0;
}
img {
position: relative;
left: 50%;
transform: translateX(-50%);
display: block;
/*height: 100%;*/
}
<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>
I should clarify that my intent is to stretch the image height to 100% but maintain aspect ratio. The left and right edges of the image should be clipped as needed, and the image should be centered.
You could create a "hidden" cell with a pseudo element (width:0px; height: 0px; padding-bottom: 100%;), overlap it with the real first cell and set all cells to the same height with grid-auto-rows: 1fr; and make the images absolutely positioned.
More in this article: https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3
.grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.grid > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
/* padding-bottom: 100%; */
/* height: 0; */
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
}
You could use object-fit: cover and then give the grid items an explicit height so that the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. object-fit MDN
This would replace your height: 0 and padding-bottom: 100% hack. When using object-fit: cover, one thing to note is that if the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
You could not use object-fit: cover with the following CSS and the images will continue to fill 100% of the grid items height, just without the "clipped to fit" part.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
height: 18rem; /* vary this to what you need */
}
img {
display: block;
max-width: 100%;
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>
You can do it like below:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
background-color: red;
aspect-ratio: 1; /* square items */
}
img {
/* no size contribution */
width: 0;
height: 0;
/* */
/* fill the item space*/
min-height: 100%;
min-width: 100%;
/* */
display: block;
object-fit: cover; /* avoid distortion*/
}
<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>
I use some inline styling in the HTML Doc. I would like to achieve a flexbox with n divisions where divs are squared. Within these divs I want to add certain images (here a placeholder)
I was looking up some other threads where there was padding used as a measure to adjust the box "height" since it is calculated upon width. However this solution only expands the current box in height (outlined with the blue border).
Has anyone a tip on how to avoid this?
EDIT: Apparently the padding solution works while using units like vh and vw instead of percentage and as long as I do not insert an image
.container {
position: relative;
width: 90%;
max-height: 35%;
display: flex;
margin: 5%;
border: 5px solid black;
justify-content: space-around;
}
.box {
position: relative;
width: 100%;
margin: 2.5%;
border: 5px solid blue;
overflow: hidden;
}
.image {
position: relative;
width: 100%;
}
<div class="container">
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>
We now have access to aspect-ratio in CSS although it is poorly supported at the time of writing.
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
.container {
width: 90%;
max-height: 35%;
display: flex;
margin: 5%;
border: 5px solid black;
justify-content: space-around;
}
.box {
margin: 2.5%;
flex: 1;
aspect-ratio: 1;
border: 5px solid blue;
overflow: hidden;
}
.image {
max-width: 100%;
display: block;
}
<div class="container">
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>
To manage this, there is a little known trick (tbh I didn't know you could do this) with setting an aspect ratio on divs of unknown/dynamic widths. See this article.
I ended up adding position: absolute for the images to not mess with the height of the divs after applying this 1:1 ratio for your scenario:
.box:before {
content: "";
float: left;
padding-top: 100%; /* initial ratio of 1:1*/
}
This might be what you are trying to do:
.container {
position: relative;
width: 90%;
max-height: 35%;
display: flex;
margin: 5%;
border: 5px solid black;
justify-content: space-around;
}
.box {
position: relative;
width: 100%;
margin: 2.5%;
border: 5px solid blue;
overflow: hidden;
}
.box:before {
content: "";
float: left;
padding-top: 100%; /* initial ratio of 1:1*/
}
.image {
position: absolute;
width: 100%;
}
<div class="container">
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</div>
<div class="box">
<img class="image" src="https://images.unsplash.com/photo-1611817757571-75fe5c08ffd9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>
I've created 3 inline divs that take 33.333% of their parent width and now I'm trying to put an images inside those divs. Sadly, if I put an image that exceeds the divs 33.333% width, the image goes out of the container. I'm trying to make it so that the image takes full width of parent container but I'm not having luck.
.wrapper {
width: 70%;
margin: 0 auto;
height: 100%;
}
.gallery-container {
font-size: 0px;
line-height: 0;
margin-bottom: 15px;
}
.gallery-element {
display: inline-block;
width: 33.33333%;
}
.responsive {
width: 100%;
height: auto;
}
<div class="wrapper">
<section>
<div class="gallery-container">
<div class="gallery-element">
<img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
<div class="gallery-element">
<img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
<div class="gallery-element">
<img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
</div>
</section>
</div>
Remove the dots on responsive class.
.wrapper {
width: 70%;
margin: 0 auto;
height: 100%;
}
.gallery-container {
font-size: 0px;
line-height: 0;
margin-bottom: 15px;
}
.gallery-element {
display: inline-block;
width: 33.33333%;
}
.responsive {
width: 100%;
height: auto;
}
<div class="wrapper">
<section>
<div class="gallery-container">
<div class="gallery-element">
<img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
<div class="gallery-element">
<img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
<div class="gallery-element">
<img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
</div>
</section>
</div>
Have you tried setting the img width and height properties to 100% like this
img {
width: 100%
height: 100%
}