Estoy tratando de cambiar el tamaño de una imagen a una cuadrícula css. Sin embargo, la imagen no se "estira" a la celda de la cuadrícula. ¿Alguna idea de cómo puedo hacer que esto suceda?
<!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>Puede archivar esto usando la imagen como fondo. Lo que ya mencionaste. Pero en su código original, el problema era el selector. en su lugar, #img use solo el nombre de la etiqueta img, por ejemplo.
#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>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras