I am trying to resize an image to a css grid. However, the image is not "stretching" to the grid cell. Any ideas how I can make this happen?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test 4x4 responsive grid</title>
<style>
#grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
aspect-ratio: 16 / 9;
}
#picture {
width: 100%;
height: 100%;
}
#img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="grid-wrapper">
<div id="picture">
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
<div>
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
<div>
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
<div>
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
</div>
</body>
</html>>Solution :
You can archive this by using the image as background. What you already mentioned. But In your original code the problem was the selector. instead #img use only the img tag name for example.
#grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
aspect-ratio: 16 / 9;
}
img {
width: 50%;
height: 50%;
} <div id="grid-wrapper">
<div id="picture">
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
<div>
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
<div>
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
<div>
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" type="image/jpeg">
<img alt="Test image" src="https://upload.wikimedia.org/wikipedia/commons/9/96/Serbian_artilery_at_Adrianopoli.png" />
</picture>
</div>
</div>
</body>
</html>