{"id":8975,"date":"2025-01-08T11:30:12","date_gmt":"2025-01-08T08:30:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/"},"modified":"2025-01-08T11:30:12","modified_gmt":"2025-01-08T08:30:12","slug":"cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/","title":{"rendered":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit"},"content":{"rendered":"<p><body><\/p>\n<p>\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit<\/p>\n<p>Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir.  Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur.  Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r,  ancak CSS&#8217;in sundu\u011fu <code>aspect-ratio<\/code> ve <code>object-fit<\/code> \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz.  Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<h2>Aspect-ratio: Oransal Boyutland\u0131rma<\/h2>\n<p><code>aspect-ratio<\/code> \u00f6zelli\u011fi, bir elementin geni\u015flik-y\u00fckseklik oran\u0131n\u0131 belirlemenizi sa\u011flar. Bu sayede, resmin orijinal oran\u0131n\u0131 koruyarak,  geni\u015fli\u011fi veya y\u00fcksekli\u011fi belirledi\u011finizde di\u011fer boyut otomatik olarak hesaplan\u0131r.  \u00d6rne\u011fin, 16:9 oran\u0131nda bir resim i\u00e7in, <code>aspect-ratio: 16\/9;<\/code> yazman\u0131z yeterlidir.  Bu, resmin her zaman 16:9 oran\u0131n\u0131 koruyarak g\u00f6r\u00fcnt\u00fclenmesini sa\u011flar.  B\u00f6ylece,  bozulma veya \u00e7arp\u0131tma olmadan,  temiz bir g\u00f6r\u00fcn\u00fcm elde edebilirsiniz.<\/p>\n<p>\u0130\u015fte basit bir \u00f6rnek:<\/p>\n<pre><code>\n&lt;div style=\"width: 300px; aspect-ratio: 16\/9; background-color: #f0f0f0;\">\n  &lt;img src=\"resim.jpg\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n&lt;\/div>\n<\/code><\/pre>\n<h2>Object-fit: \u0130\u00e7erik Uyumlamas\u0131<\/h2>\n<p><code>object-fit<\/code> \u00f6zelli\u011fi ise, resmin, kendisine ayr\u0131lan alana nas\u0131l s\u0131\u011faca\u011f\u0131n\u0131 belirler.  Bir\u00e7ok se\u00e7enek sunar:<\/p>\n<ul>\n<li><code>fill<\/code>: Resim, alan\u0131 tamamen doldurur, ancak bu durumda oransal bozulma olabilir.<\/li>\n<li><code>contain<\/code>: Resim, orijinal oran\u0131n\u0131 koruyarak, alana tam olarak s\u0131\u011facak \u015fekilde k\u00fc\u00e7\u00fclt\u00fcl\u00fcr.  Bo\u015fluklar olabilir.<\/li>\n<li><code>cover<\/code>: Resim, alan\u0131 tamamen kaplayacak \u015fekilde b\u00fcy\u00fct\u00fcl\u00fcr, ancak orijinal oran\u0131n\u0131 korur.  K\u0131rpma olabilir.<\/li>\n<li><code>scale-down<\/code>: Resim, hem <code>contain<\/code> hem de <code>cover<\/code> de\u011ferlerinin en iyisini se\u00e7er, yani e\u011fer resim zaten alana s\u0131\u011f\u0131yorsa orijinal boyutunu korur, aksi takdirde <code>contain<\/code> veya <code>cover<\/code> davran\u0131\u015f\u0131 g\u00f6sterir.<\/li>\n<li><code>none<\/code>: Resim orijinal boyutunda kal\u0131r, ta\u015fma olabilir.<\/li>\n<\/ul>\n<p>Yukar\u0131daki \u00f6rnekte, <code>object-fit: cover;<\/code> kullanarak, resmin alan\u0131 tamamen kaplamas\u0131n\u0131 ve orijinal oran\u0131n\u0131 koruyarak k\u0131rp\u0131lmas\u0131n\u0131 sa\u011flad\u0131k.  \u0130htiya\u00e7lar\u0131n\u0131za g\u00f6re farkl\u0131 <code>object-fit<\/code> de\u011ferlerini deneyebilirsiniz.<\/p>\n<h2>Birlikte Kullan\u0131m<\/h2>\n<p><code>aspect-ratio<\/code> ve <code>object-fit<\/code> birlikte kullan\u0131ld\u0131\u011f\u0131nda,  farkl\u0131 boyutlardaki resimleri sorunsuz ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 olu\u015ftururlar.  Aspect-ratio,  alan\u0131n oran\u0131n\u0131 belirlerken,  object-fit,  resmin bu alana nas\u0131l uyum sa\u011flayaca\u011f\u0131n\u0131 kontrol eder.  Bu kombinasyon,  responsive tasar\u0131mlar i\u00e7in olduk\u00e7a idealdir.<\/p>\n<p>Daha fazla bilgi ve \u00f6rnek i\u00e7in <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\">web sitemi<\/a> ziyaret edebilirsiniz. Ayr\u0131ca, konu hakk\u0131nda daha fazla bilgi edinmek i\u00e7in  <a href=\"https:\/\/dev.to\/snippflow\/gallery-with-varied-image-sizes-using-aspect-ratio-and-object-fit-4jh9\" target=\"_blank\">bu ba\u011flant\u0131y\u0131<\/a> inceleyebilirsiniz.<\/p>\n<p>Umar\u0131m bu makale, <code>aspect-ratio<\/code> ve <code>object-fit<\/code> \u00f6zelliklerini anlaman\u0131za ve web tasar\u0131mlar\u0131n\u0131zda kullanman\u0131za yard\u0131mc\u0131 olmu\u015ftur.  Sorular\u0131n\u0131z veya yorumlar\u0131n\u0131z i\u00e7in l\u00fctfen ileti\u015fime ge\u00e7mekten \u00e7ekinmeyin. <\/p>\n<p>#Etiketler: aspect-ratio, object-fit, responsive tasar\u0131m, resim galerisi, CSS, web geli\u015ftirme, Fatih Soysal, resim boyutland\u0131rma,  web tasar\u0131m,  HTML,  g\u00f6r\u00fcnt\u00fc optimizasyonu<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8975","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit<\/title>\n<meta name=\"description\" content=\"Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir. Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur. Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r, ancak CSS&#039;in sundu\u011fu aspect-ratio ve object-fit \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz. Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir. Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur. Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r, ancak CSS&#039;in sundu\u011fu aspect-ratio ve object-fit \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz. Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-08T08:30:12+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit\",\"datePublished\":\"2025-01-08T08:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\"},\"wordCount\":455,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\",\"name\":\"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-01-08T08:30:12+00:00\",\"description\":\"Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir. Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur. Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r, ancak CSS'in sundu\u011fu aspect-ratio ve object-fit \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz. Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit","description":"Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir. Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur. Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r, ancak CSS'in sundu\u011fu aspect-ratio ve object-fit \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz. Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/","og_locale":"tr_TR","og_type":"article","og_title":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit","og_description":"Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir. Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur. Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r, ancak CSS'in sundu\u011fu aspect-ratio ve object-fit \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz. Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.","og_url":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-01-08T08:30:12+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"2 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit","datePublished":"2025-01-08T08:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/"},"wordCount":455,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/","url":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/","name":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-01-08T08:30:12+00:00","description":"Web tasar\u0131m\u0131nda, farkl\u0131 boyutlardaki resimleri d\u00fczenli ve estetik bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek \u00f6nemlidir. Bu, \u00f6zellikle resim galerileri i\u00e7in kritik bir konudur. Klasik y\u00f6ntemler genellikle k\u0131rpma veya bo\u015fluklarla sonu\u00e7lan\u0131r, ancak CSS'in sundu\u011fu aspect-ratio ve object-fit \u00f6zellikleri ile bu sorunu elegant bir \u015fekilde \u00e7\u00f6zebiliriz. Bu makalede, bu iki \u00f6zelli\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve \u00e7e\u015fitli senaryolarda nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/cesitli-boyutlarda-resim-iceren-galeriler-aspect-ratio-ve-object-fit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00c7e\u015fitli Boyutlarda Resim \u0130\u00e7eren Galeriler: aspect-ratio ve object-fit"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=8975"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8975\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=8975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=8975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=8975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}