Image doesn't fit in its parent div properly
I have a div(card) , Inside it i have two more divs 1. top div and 2. bottom div, inside top div i have placed an image and have set its width to 100% and height to auto, but I'm noticing some extra pixels(green horizontal line) at the bottom of my top div ,I don't have any margin or padding set on top div. How can I fix this.
img{
width: 100%,
height:auto
}
top{
background-color:green
}
22 Replies
try doing margin top to 0
it might be happening because of that
or ig background-image cover would do it
thanks, but it didn't work
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
did it, no luck
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
wait
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Inception</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Goalmaal</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Munna bhai MBBS</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Once upon a time in hollywood</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Interestellar</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Bhoot</p>
</div>
</div>
</div>
</div>
</body>
</html>
css
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
background-color: #f5f5f5;
}
.container .grid {
width: 100%;
max-width: 1024px;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
padding: .5rem;
}
.grid .grid-item {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: .25rem;
overflow: hidden;
}
.grid-item .top {
background-color: rgb(34, 218, 43);
}
.grid-item .top img:hover {
scale: 1.05;
}
.grid-item .bottom {
margin: .25rem .15rem;
font-size: 1.1rem;
font-family: sans-serif;
color: rgb(59, 56, 56);
}
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
display:block worked, but as you can see I'm using scale property on hover on image , when i hover over image, Top left right sides scale properly but image gets pushed down some pixels at the bottom
same result with vertical-align: bottom
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Doesn't work
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
hey thanks, it worked, i used vertical-align on image, and then overflow: hidden on parent div(top div).😆
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I don't find any option to mark this as solved!!😆
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I was able to this on mobile also, all I had to do is add extra SOLVED tag, thanks.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View