CSS img max-width: 100%

Question 1

Si especificamos max-width: 100% para un elemento de imagen (por ejemplo una imagen de 250px * 500px) y ponemos esta imagen dentro de un elemento primario de 1000px de ancho, entonces si el padre es reducido <= 500px, la imagen va a ser reducido de acuerdo a ocupar toda la longitud de los padres. Sin embargo, si el padre de ancho que está en > 500px, la imagen no a escala, pero en su original 500px.

Lo que me confunde es el significado de 100% aquí. Desde mi entender, el porcentaje relativo es siempre con respecto a su padre. Así que no significa que la anchura máxima es siempre el ancho actual de su padre? Así que la imagen siempre se pueden reducir/ampliar para el ajuste de sus padres, debido a que el ancho máximo es el 100%? ¿Qué estoy malentendido aquí? cómo entender la relativa porcentaje utilizado en max-width en este caso? ¿Qué es lo relativo a? Gracias!

Question 2

Sí, hay una diferencia entre width y max-width.

Esta definición de w3school hará que sea fácil para que usted pueda entender.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

El max-width propiedad define la anchura máxima de un elemento.

Si el contenido es mayor que el ancho máximo, automáticamente cambio de la altura del elemento.

Si el contenido es menor que el máximo ancho, el ancho máximo la propiedad no tiene ningún efecto.

Nota: Esto impide que el valor de la width la propiedad de convertirse en más grande que max-width. El valor de la max-width propiedad anula el width de la propiedad.

Regresando a su pregunta ahora, si reemplazar max-width con width y comprobar el ancho de la imagen para el punto de ruptura >=500px o <500px, va de curso a los padres de ancho completo.

Pero como se menciona en la definición anterior, max-width se asegura de que la anchura del elemento no ir por encima de un cierto ancho (no importa lo que es el padre de ancho) y es por eso que esta propiedad se la trajo.

Imran Rafiq Rather · Answer 1 · 2021-11-24T03:21:07

Sí, hay una diferencia entre width y max-width.

Esta definición de w3school hará que sea fácil para que usted pueda entender.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

El max-width propiedad define la anchura máxima de un elemento.

Si el contenido es mayor que el ancho máximo, automáticamente cambio de la altura del elemento.

Si el contenido es menor que el máximo ancho, el ancho máximo la propiedad no tiene ningún efecto.

Nota: Esto impide que el valor de la width la propiedad de convertirse en más grande que max-width. El valor de la max-width propiedad anula el width de la propiedad.

Regresando a su pregunta ahora, si reemplazar max-width con width y comprobar el ancho de la imagen para el punto de ruptura >=500px o <500px, va de curso a los padres de ancho completo.

Pero como se menciona en la definición anterior, max-width se asegura de que la anchura del elemento no ir por encima de un cierto ancho (no importa lo que es el padre de ancho) y es por eso que esta propiedad se la trajo.

utilizar fuentes oficiales en su lugar, tal como W3C o MDN. w3schools es inexacta.
@Raptor: admiro su consejo, yo mismo prefiero fuentes oficiales. Sin embargo MDN o W3C todavía no está mal para los principiantes. Todos empezamos de estos sitios y con el tiempo nos dimos cuenta de que el w3c tiene algunos problemas, en algunos casos, pero para un principiante a entender un punto, no creo que sea malo para compartir :) de todas formas, Gracias

CSS img max-width: 100%

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría