Tengo una página web en la que estoy trabajando y nunca antes había tenido tantas dificultades con una imagen. Estoy usando consultas de medios, comencé con la pantalla pequeña y estoy avanzando hasta llegar a la grande. Las imágenes pequeñas y medianas están bien, pero la imagen grande solo cubre el lado izquierdo de la página y deja la otra mitad en blanco. Lo tengo entre el encabezado y el navegador, por lo que realmente resalta. No puedo entender por qué no utiliza la imagen más grande que tengo. tiene más de 6000 px, por lo que debería llegar bien al borde. Lo reduciré una vez que consiga que llegue a lo largo de la página. Publicaré las consultas de medios y CSS a continuación, y el HTML para las imágenes.
/*small view*/
body {
margin: 0 auto;
min-width: 250px;
max-width: 539px;
background-color: #fee9c1;
}
main {
margin: 0 auto;
min-width: 250px;
max-width: 499px;
}
header {
max-width: 100%;
margin-top: 0px;
display: flex;
}
nav {
max-width: 100%;
margin: 0 auto;
}
media query :
/*medium view*/
@media only screen and (min-width: 540px) {
.banner img {
max-width: 100%;
}
body {
max-width: 1150px;
box-sizing: border-box;
}
main {
max-width: 1150px;
box-sizing: border-box;
}
}
/*large view*/
@media only screen and (min-width: 770px) {
main {
max-width: 1150px;
margin: auto;
}
.banner picture img {
display: flex;
max-width: 100%;
z-index: 0;
}
}
<div class="banner">
<picture>
<source srcset="https://via.placeholder.com/540x250.jpg" media="(min-width: 280px) and (max-width: 539px)">
<source srcset="https://via.placeholder.com/800x400.jpg" media="(min-width: 540px) and (max-width: 799px)">
<source srcset="https://via.placeholder.com/1440x600.jpg" media="(min-width: 800px) and (max-width: 1440px">
<img src="https://stackoverflow.com/questions/66835178/images/welcomesign.jpg" alt="alt txt">
</picture>
</div>
porque el ancho máximo del cuerpo está establecido en 1150 px. por lo que ningún contenido puede ser más ancho que 1150 px.
- tacoshy
27/03/2021 a las 19:21
------------------------------------
@media only screen and (min-width: 540px) {
.banner img {
max-width: 100%;
}
body {
max-width: 1150px;
box-sizing: border-box;
}
...
}
Esta línea está causando el problema. Cada pantalla con un ancho de 540 px o superior tiene establecido el ancho máximo de bdoy en 1150 px. Si sus consultas de medios para pantallas grandes no sobrescriben esta propiedad y el valor aún se aplica. Significa que el cuerpo tiene un ancho máximo de 1150 px y ningún contenido puede ser más ancho que eso.
------------------------------------
No veo ningún CSS que indique a la imagen que se estire en todo su ancho, así que creo que necesitas algo como:
.banner img {
width: 100%;
}
Compartir
mejorar esta respuesta
Seguir
Respondido
27 de marzo de 2021 a las 19:17
Jonny
Jonny
1
3
Está justo en el CSS dentro de las consultas de medios. Además, eso no está causando el problema.
- tacoshy
27/03/2021 a las 19:21
Veo el ancho máximo pero no veo el ancho. El ancho máximo evitará que la imagen exceda el ancho del contenedor, pero no estirará la imagen para llenar el contenedor si el formato nativoEl ancho de la imagen es menor que el ancho del contenedor.
- Jonny
27/03/2021 a las 19:24
la imagen tiene un ancho de 6000 px como se describe. Por lo tanto, seguramente no llenará el ancho. Pero el problema es: body { max-width: 1150px; } que también limita la imagen a 1150px;
- tacoshy
27/03/2021 a las 19:27
