CSS img max-width: 100%

Question 1

Se si specificare max-width: 100% per un elemento di un'immagine (per esempio un'immagine di 250px * 500px) e abbiamo messo questa immagine all'interno di un elemento padre di 1000px di larghezza, quindi se il genitore è ridotto <= 500px, l'immagine verrà ridotta di conseguenza ad occupare tutta la lunghezza del genitore. Tuttavia, se il genitore in larghezza a > 500px, l'immagine non viene ridimensionata, ma al suo originale 500px.

Quello che mi confonde è il significato del 100% qui. Dalla mia comprensione, la relativa percentuale è sempre per quanto riguarda il suo genitore. Così non è significa che la larghezza massima è sempre la larghezza di suo padre? In modo che l'immagine sarà sempre ristretto/scala fino a soddisfare i suoi genitori, perché la larghezza max è 100%? Che cosa sono io equivoco? come capire la percentuale relativa utilizzato in max-width, in questo caso? Che cosa è relativa? Grazie!

Question 2

Sì, c'è una differenza tra width e max-width.

Questa definizione da w3school sarà facile per voi capire.

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

Il max-width proprietà definisce la larghezza massima di un elemento.

Se il contenuto è maggiore della larghezza massima, sarà automaticamente modificare l'altezza dell'elemento.

Se il contenuto è inferiore alla larghezza massima, il max-width la proprietà non ha alcun effetto.

Nota: Questo impedisce il valore della width proprietà di diventare più grande max-width. Il valore della max-width proprietà ha il width proprietà.

Venendo alla tua domanda, se si sostituisce max-width con width per verificare la larghezza dell'immagine per il punto di rottura >=500px o <500px, sarà, naturalmente, prendere i genitori intera larghezza.

Ma, come menzionato dalla definizione di cui sopra, max-width fa in modo che la larghezza dell'elemento non andare al di sopra di una certa larghezza (non importa che cosa è il padre di larghezza) e per questo motivo questa proprietà è stato portato in.

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

Sì, c'è una differenza tra width e max-width.

Questa definizione da w3school sarà facile per voi capire.

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

Il max-width proprietà definisce la larghezza massima di un elemento.

Se il contenuto è maggiore della larghezza massima, sarà automaticamente modificare l'altezza dell'elemento.

Se il contenuto è inferiore alla larghezza massima, il max-width la proprietà non ha alcun effetto.

Nota: Questo impedisce il valore della width proprietà di diventare più grande max-width. Il valore della max-width proprietà ha il width proprietà.

Venendo alla tua domanda, se si sostituisce max-width con width per verificare la larghezza dell'immagine per il punto di rottura >=500px o <500px, sarà, naturalmente, prendere i genitori intera larghezza.

Ma, come menzionato dalla definizione di cui sopra, max-width fa in modo che la larghezza dell'elemento non andare al di sopra di una certa larghezza (non importa che cosa è il padre di larghezza) e per questo motivo questa proprietà è stato portato in.

utilizzare fonti ufficiali, come il W3C o MDN. w3schools è impreciso.
@Raptor: ammiro il tuo consiglio, io stesso preferisco fonti ufficiali. Tuttavia MDN o W3C non è ancora un male per i principianti. Tutti abbiamo iniziato da questi siti e con il tempo, anche se abbiamo notato che il w3c non ha alcuni problemi, in alcuni casi, ma per un principiante di capire un punto, non credo che è male per la condivisione :) Comunque, Grazie

CSS img max-width: 100%

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria