CSS3أساسي
Correction d'une image déformée dans une carte produit
السيناريو
Contexte : Une page e-commerce affiche des images produits dans des cartes fixes. Le Problème : Les images sont déformées car leur ratio n'est pas respecté. Contraintes : Utiliser uniquement des propriétés CSS3 comme object-fit. Aucun changement HTML. Code actuel : .card img { width: 200px; height: 200px; } Livrable attendu : Corriger le style afin que les images conservent leurs proportions tout en remplissant correctement le conteneur.
المهارات المستهدفة
css3imagelayoutobjectfit
حالات تطبيقية أخرى في CSS3
- Implémentation d'une grille responsive avec auto-fit et minmaxمتقدم
- Implémentation d'un système de composants avec isolation via :where et :isخبير
- Mise en place d'un système de cartes avec Flexbox adaptatifمتقدم
- Implémentation d'un système de design tokens avec variables CSSخبير
- Optimisation d'un effet parallaxe léger en CSSمتقدم
- Optimisation avancée d'un layout sticky combiné à scroll snappingخبير
أسئلة أصلية من تصميم CodeDuel. لا ترتبط CodeDuel بأي ناشر أو هيئة اعتماد مذكورة؛ أسماء الشهادات والعلامات التجارية مملوكة لأصحابها، ولا تُذكر إلا للإشارة إلى المجال الذي يغطيه الاختبار. الإبلاغ عن محتوى
