--- id: 61539f32a206bd53ec116465 title: Step 17 challengeType: 0 dashedName: step-17 --- # --description-- Nota come alcune delle immagini sono diventate distorte. Questo perché le immagini hanno diverse proporzioni. Piuttosto che impostare individualmente le proporzioni delle immagini, puoi utilizzare la proprietà `object-fit` per determinare come dovrebbero comportarsi. Assegna al selettore `.gallery img` la proprietà `object-fit` con il valore `cover`. Questo dirà all'immagine di riempire il contenitore `img` mantenendo le proporzioni. # --hints-- Il selettore `.gallery img` dovrebbe avere una proprietà `object-fit` con il valore `cover`. ```js assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover'); ``` # --seed-- ## --seed-contents-- ```html Photo Gallery

css flexbox photo gallery

``` ```css * { box-sizing: border-box; } body { margin: 0; font-family: sans-serif; background: #f5f6f7; } .header { text-align: center; text-transform: uppercase; padding: 32px; background-color: #0a0a23; color: #fff; border-bottom: 4px solid #fdb347; } .gallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1400px; margin: 0 auto; padding: 20px 10px; } --fcc-editable-region-- .gallery img { width: 100%; max-width: 350px; height: 300px; } --fcc-editable-region-- ```