CODEWITHSUNDEEP
htmlcss
Mo Miah
Mo Miah

Reputation: 348

How to Fit image into div?

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;
}

Upvotes: -1

Views: 75

Answers (1)

Aidan Young
Aidan Young

Reputation: 614

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>

Upvotes: 1

Related Questions