html: imagen que supera los límites de la página

CorePress2024-01-24 10

Soy nuevo en CSS y HTML y estoy haciendo mi sección principal ahora mismo, pero cuando agrego una imagen a la sección principal, la imagen se carga mucho más allá de los límites del encabezado. ¿Cómo puedo hacer para que todo en la página esté alineado con el encabezado y no sobrepase los "límites"?

ejemplo: https://prnt.sc/10wn3io

¿puedes compartir tu código?

- zoldxk

27 de marzo de 2021 a las 0:53

Necesitamos un código por favor

-khushi

27 de marzo de 2021 a las 0:56

------------------------------------

Puedes configurar el ancho y el margen: 0 auto; a los contenedores. Y también debes configurar object-fit: cover para cambiar el tamaño de tu imagen.

.container {
  width: 300px;
  margin: 0 auto;
}

img {
  object-fit: cover;
  width: 100%;
  height: 250px;
}

body {
  background-color: #ecf0f1;
}

.menu {
  height: 50px;
  background-color: #e67e22;
  text-align: center;
  color: #ffffff;
  line-height: 50px;
  font-size: 30px;
  font-family: sans-serif;
}

<body>
  <div class="container menu">
    Menü
  </div>
  <div class="container">
    <img src="https://loremflickr.com/cache/resized/65535_50917877588_9db3484f10_c_640_360_nofilter.jpg">
  </div>
</body>

Si esta solución no funciona, podemos encontrar una solución mejor si compartes tu código.

------------------------------

img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}
/* if you want to cover the background by image then
add `background-size:cover;` */

}

randomThread

Servidor SQL: ¿Cómo puedo transformar SQL para que muestre las fechas de inicio y finalización y todos los días?Flutter: ¿cuándo usar `print` y `debugPrint`?javascript - Agregar clase a la columna de la tabla Python - Filtrar pandas DataFrame por criterios de subcadena Idea intellij: la implementación de reflexión de Kotlin no se encuentra en tiempo de ejecución. Asegúrate de tener kotlin-reflec r - Combinar dos filas mientras se mantienen los datos iniciales elocuente - Laravel: atributo del modelo y dónde entre c# - ASP.NET Core 5.0 - POST en modelo personalizado android - Mostrar imagen A o B - Flutter powerbi: medida o columna filtrada por una relación y una segmentación de datos android - Jetpack Compose Crossfade roto en Alpha html - superposición de secciones en modo móvil css

html: imagen que supera los límites de la página

Su guía para un futuro mejor - libreflare

Categoría