{"id":867,"date":"2025-02-07T11:03:43","date_gmt":"2025-02-07T11:03:43","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=867"},"modified":"2026-02-20T07:28:06","modified_gmt":"2026-02-20T07:28:06","slug":"prosty-trick-z-object-fit","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/prosty-trick-z-object-fit\/","title":{"rendered":"Jak rozwi\u0105za\u0107 problem nier\u00f3wnych obrazk\u00f3w w kafelkach? Prosty trick z object-fit"},"content":{"rendered":"\n<p>Czy zdarzy\u0142o Ci si\u0119, \u017ce w siatce post\u00f3w lub kafelkach na stronie obrazki maj\u0105 r\u00f3\u017cne wymiary, przez co ca\u0142o\u015b\u0107 wygl\u0105da niesp\u00f3jnie? Cz\u0119sto problem wynika z tego, \u017ce u\u017cytkownicy (np. klienci) wrzucaj\u0105 zdj\u0119cia w zbyt ma\u0142ej rozdzielczo\u015bci, przez co system nie mo\u017ce wygenerowa\u0107 poprawnej miniaturki.<\/p>\n\n\n\n<p>Zanim zaczniemy walczy\u0107 z edycj\u0105 obraz\u00f3w czy generowaniem wersji zast\u0119pczych, mo\u017cemy spr\u00f3bowa\u0107 prostego rozwi\u0105zania \u2013 w\u0142a\u015bciwo\u015bci CSS <code>object-fit<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jak to dzia\u0142a?<\/h3>\n\n\n\n<p>Zamiast kombinowa\u0107 z <code>background-image<\/code>, wystarczy doda\u0107 do <code>&lt;img&gt;<\/code> poni\u017csze style:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">img {<br>  width: 100%;<br>  height: 200px; \/* lub inna sta\u0142a wysoko\u015b\u0107 *\/<br>  object-fit: cover;<br>}<\/pre>\n\n\n\n<p>Dzi\u0119ki temu obrazki zostan\u0105 przyci\u0119te w taki spos\u00f3b, by wype\u0142ni\u0107 ca\u0142y obszar, nie trac\u0105c przy tym proporcji \u2013 dok\u0142adnie tak, jak dzia\u0142a <code>background-size: cover<\/code> dla <code>div<\/code>.<\/p>\n\n\n\n<p>Ograniczenie? Nie mo\u017cemy zmienia\u0107 <code>background-position<\/code> ani ustawi\u0107 <code>repeat<\/code>, ale w wi\u0119kszo\u015bci przypadk\u00f3w to i tak \u015bwietne rozwi\u0105zanie!<\/p>\n\n\n\n<p>Wi\u0119cej na ten temat znajdziesz tutaj: <a href=\"https:\/\/www.w3schools.com\/css\/css3_object-fit.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">object-fit na W3Schools<\/a>.<\/p>\n\n\n\n<p>\ud83d\udc49 Masz swoje sposoby na radzenie sobie z tym problemem? Daj zna\u0107 w komentarzu!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Czy zdarzy\u0142o Ci si\u0119, \u017ce w siatce post\u00f3w lub kafelkach na stronie obrazki maj\u0105 r\u00f3\u017cne wymiary, przez co ca\u0142o\u015b\u0107 wygl\u0105da niesp\u00f3jnie? Cz\u0119sto problem wynika z tego, \u017ce u\u017cytkownicy (np. klienci) wrzucaj\u0105 zdj\u0119cia w zbyt ma\u0142ej rozdzielczo\u015bci, przez co system nie mo\u017ce wygenerowa\u0107 poprawnej miniaturki. Zanim zaczniemy walczy\u0107 z edycj\u0105 obraz\u00f3w czy generowaniem wersji zast\u0119pczych, mo\u017cemy [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":868,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,4],"tags":[],"class_list":["post-867","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ciekawostki","category-web-development"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=867"}],"version-history":[{"count":2,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/867\/revisions"}],"predecessor-version":[{"id":870,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/867\/revisions\/870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/868"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}