Meta tags:
description=Usa la propiedad CSS object-fit para definir cómo un elemento se ajusta en su contenedor. Consulta los valores con ejemplos.;

Headings (most frequently used words):

object, fit, propiedad, con, ejemplo, de, la, el, valor, css, por, qué, usar, sintaxis, valores, compatibilidad, navegadores, consejos, práctica, fill, resultado, cover, contain, none, scale, down,

Text of the page (most frequently used words):
#object (38), border (34), fit (31), width (31), css (30), style (25), caja (24), html (22), height (21), text (21), para (20), tree (20), font (20), imagen (19), que (18), img (18), color (18), grid (18), con (16), aprender (15), 200 (15), title (15), fill (14), background (14), image (14), los (13), propiedad (13), valor (13), column (13), cover (12), position (11), contain (11), none (11), media (11), default (11), contenido (10), body (10), 300 (10), alt (10), uploads (10), 0001 (10), b408569013c0bb32b2afb0f0d45e93e982347951 (10), jpeg (10), src (10), head (10), break (10), top (9), right (9), left (9), bottom (9), animation (9), overflow (8), relación (8), aspecto (8), stroke (8), scale (7), down (7), más (7), decoration (7), offset (7), flex (7), valores (6), page (6), usa (6), size (6), como (6), copiar (6), class (6), original (6), property (6), ejemplo (6), align (6), padding (6), margin (6), type (6), variant (6), w3docs (5), práctica (5), sintaxis (5), qué (5), mode (5), visible (5), dentro (5), escala (5), llenar (5), value (5), example (5), 400 (5), the (5), document (5), doctype (5), imágenes (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), auto (4), recorta (4), elemento (4), cómo (4), esa (4), hace (4), predeterminado (4), conservando (4), estira (4), pruébalo (4), mismo (4), cuando (4), transform (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), todos (3), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), ejemplos (3), navegadores (3), por (3), usar (3), blend (3), permanecer (3), parte (3), solo (3), lugar (3), video (3), initial (3), nunca (3), arriba (3), mantiene (3), tamaño (3), una (3), forma (3), las (3), queda (3), esto (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), content (3), columns (3), direction (3), clip (3), box (3), only (3), ver (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), fragmentos (2), compatibilidad (2), consejos (2), this (2), mix (2), stretch (2), cuáles (2), son (2), posibles (2), desbordamiento (2), recortado (2), debe (2), permanece (2), nada (2), elementos (2), reemplazados (2), inherit (2), hacia (2), intrínseco (2), ignorando (2), desborda (2), bordes (2), quepa (2), puede (2), espacio (2), vacío (2), letterboxing (2), exactamente (2), pequeñas (2), multimedia (2), sin (2), natural (2), ignora (2), dimensiones (2), centrada (2), toda (2), alta (2), distorsiona (2), miniaturas (2), hero (2), ajustarse (2), estirar (2), resultado (2), mientras (2), cada (2), css3 (2), predeterminada (2), logotipos (2), navegador (2), propiedades (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, comprobar, center, oculto, obtén, información, combínalo, elegir, sigue, ocupando, estableciste, cambia, pinta, afecta, svg, embebido, allí, div, compatible, modernos, ten, cuenta, estos, puntos, hereda, padre, use, renderiza, pequeño, entre, centrado, desbordan, recortan, aparecer, distorsionarse, descripción, compara, produce, renderizada, pequeña, comporta, grandes, segura, reducir, sobredimensionado, escalar, completamente, cualquier, exceda, úsalo, debas, preservar, píxeles, modo, ancha, deja, bandas, vacías, abajo, conocido, luego, pero, pueden, quedar, cortados, opción, ideal, banners, distorsionándola, siguiente, soluciona, recortando, coincida, árbol, aplastado, continuación, tiene, ancho, alto, estrecha, origen, horizontal, discrepancia, comportamiento, 400px, 200px, objectfit, dom, versión, animable, heredado, etc, aplica, inicial, controlar, recortar, combina, realmente, quieras, estire, hasta, exacta, completa, deba, fotografías, productos, aunque, eso, deje, avatares, llena, este, usarás, frecuencia, estableces, fijos, cuya, difiere, rostros, aplanan, deforman, resuelve, permite, mantener, importante, layouts, predecibles, cuadrículas, indicas, conciliar, esta, página, explica, cuándo, usarlo, uno, sus, ejecutable, relacionadas, afinar, controla, redimensiona, equivalente, vídeos, distorsionar, decides, recortarse, cambios, asignaste, reemplazado, definir, ajusta, contenedor, consulta, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, checked, active, selectores, selectors, guía, flexbox, guides, gradientes, nombres, colores, tablas, links, texto, uso, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
propiedad css object fit w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender css css basic introducción a css uso de css sintaxis css css id y class texto en css css font css links tablas css css border css padding css margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propiedad css object fit usa la propiedad css object fit para definir cómo un elemento se ajusta en su contenedor consulta los valores con ejemplos la propiedad css object fit controla cómo un elemento reemplazado como un img o un video se redimensiona para llenar su caja de contenido es el equivalente de background size para imágenes y vídeos en lugar de estirar o distorsionar el contenido multimedia decides si debe llenar ajustarse recortarse o permanecer sin cambios dentro de la caja que le asignaste esta página explica qué hace object fit cuándo usarlo cada uno de sus valores con un ejemplo ejecutable y las propiedades relacionadas para afinar el resultado por qué usar object fit cuando estableces un width y un height fijos en una imagen cuya relación de aspecto difiere de esa caja el navegador estira la imagen de forma predeterminada los rostros se aplanan los logotipos se deforman object fit resuelve esto te permite mantener las dimensiones de la caja importante para layouts predecibles y cuadrículas mientras indicas al navegador cómo conciliar la relación de aspecto natural de la imagen con esa caja usa cover para imágenes hero miniaturas y avatares llena la caja recorta el desbordamiento nunca distorsiona este es el valor que usarás con más frecuencia usa contain cuando la imagen completa deba permanecer visible logotipos fotografías de productos aunque eso deje espacio vacío usa fill el valor predeterminado solo cuando realmente quieras que la imagen se estire hasta la caja exacta de forma predeterminada la imagen queda centrada dentro de su caja para controlar qué parte se mantiene visible al recortar con cover combina object fit con object position valor inicial fill se aplica a elementos reemplazados img video object etc heredado no animable no versión css3 sintaxis dom object style objectfit cover sintaxis sintaxis css de object fit object fit fill contain cover scale down none initial inherit copiar en todos los ejemplos a continuación la caja tiene 200px de ancho y 400px de alto una caja alta y estrecha mientras que la imagen de origen es horizontal esa discrepancia es lo que hace visible el comportamiento de cada valor ejemplo de la propiedad object fit con el valor fill fill el valor predeterminado ignora la relación de aspecto y estira la imagen para que coincida exactamente con la caja por lo que el árbol queda aplastado doctype html html head title title of the document title style img tree width 200 px height 400 px object fit fill style head body h2 object fit property example h2 h3 original image h3 img src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 h3 fill value h3 img class tree src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 body html copiar pruébalo tú mismo resultado la imagen se estira para ajustarse a la caja distorsionándola el siguiente valor cover soluciona esto recortando en lugar de estirar ejemplo de la propiedad object fit con el valor cover cover escala la imagen para llenar toda la caja conservando su relación de aspecto y luego recorta lo que desborda nada se distorsiona pero los bordes pueden quedar cortados es la opción ideal para miniaturas y banners hero doctype html html head title title of the document title style img tree width 200 px height 400 px object fit cover style head body h2 object fit property example h2 h3 original image h3 img src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 h3 cover value h3 img class tree src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 body html copiar pruébalo tú mismo ejemplo de la propiedad object fit con el valor contain contain escala la imagen para que quepa dentro de la caja conservando su relación de aspecto de modo que toda la imagen permanece visible como la caja es más alta que ancha la imagen esto deja bandas vacías arriba y abajo conocido como letterboxing doctype html html head title title of the document title style img tree width 200 px height 400 px object fit contain style head body h2 object fit property example h2 h3 original image h3 img src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 h3 contain value h3 img class tree src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 body html copiar pruébalo tú mismo ejemplo de la propiedad object fit con el valor none none mantiene la imagen en su tamaño intrínseco natural e ignora completamente las dimensiones de la caja la imagen queda centrada y cualquier parte que exceda la caja se recorta úsalo cuando debas preservar el tamaño de píxeles original doctype html html head title title of the document title style img tree width 200 px height 400 px object fit none style head body h2 object fit property example h2 h3 original image h3 img src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 h3 none value h3 img class tree src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 body html copiar ejemplo de la propiedad object fit con el valor scale down scale down compara none y contain y usa el que produce la imagen renderizada más pequeña en la práctica se comporta como contain para imágenes más grandes que la caja y como none para imágenes más pequeñas una forma segura de reducir contenido multimedia sobredimensionado sin escalar nunca hacia arriba imágenes pequeñas doctype html html head title title of the document title style img tree width 200 px height 400 px object fit scale down style head body h2 object fit property example h2 h3 original image h3 img src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 h3 scale down value h3 img class tree src uploads media default 0001 01 b408569013c0bb32b2afb0f0d45e93e982347951 jpeg alt tree width 300 height 200 body html copiar pruébalo tú mismo valores valor descripción fill predeterminado estira el contenido para llenar exactamente la caja de contenido ignorando su relación de aspecto la imagen puede distorsionarse contain escala el contenido para que quepa dentro de la caja conservando su relación de aspecto puede aparecer espacio vacío letterboxing cover escala el contenido para llenar la caja conservando su relación de aspecto los bordes que desbordan se recortan none mantiene el contenido en su tamaño intrínseco ignorando la caja centrado y recortado si desborda scale down renderiza el contenido como el más pequeño entre none y contain nunca escala la imagen hacia arriba initial hace que la propiedad use su valor predeterminado fill inherit hereda la propiedad de su elemento padre compatibilidad con navegadores y consejos object fit es compatible con todos los navegadores modernos ten en cuenta estos puntos solo afecta a elementos reemplazados img video object svg embebido no hace nada en un div usa background size allí en su lugar el elemento sigue ocupando el width height que estableciste object fit solo cambia cómo se pinta el contenido dentro de esa caja combínalo con object position para elegir qué parte de la imagen permanece visible al usar cover o none si el desbordamiento recortado debe permanecer oculto la caja ya lo recorta obtén más información en css overflow práctica práctica cuáles son los posibles valores de la propiedad object fit en css cuáles son los posibles valores de la propiedad object fit en css fill none cover contain scale down stretch auto center comprobar was this page helpful yes no previous mix blend mode next object position on this page por qué usar object fit sintaxis valores compatibilidad con navegadores y consejos práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores