{"id":26582,"date":"2017-04-24T12:16:59","date_gmt":"2017-04-24T12:16:59","guid":{"rendered":"https:\/\/dev.railscarma.com\/jquery-image-resizing-plugin-imgliquid\/"},"modified":"2021-06-05T09:12:36","modified_gmt":"2021-06-05T09:12:36","slug":"jquery-bild-grosenanderung-plugin-imgliquid","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/jquery-bild-grosenanderung-plugin-imgliquid\/","title":{"rendered":"jQuery Image Resizing Plugin: ImgLiquid"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"26582\" class=\"elementor elementor-26582\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4e259f45 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4e259f45\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-786eedd6\" data-id=\"786eedd6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5ab37a77 elementor-widget elementor-widget-text-editor\" data-id=\"5ab37a77\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tImgLiquid ist ein jQuery-Plugin f\u00fcr die Gr\u00f6\u00dfen\u00e4nderung der Bilder, so dass diese Bilder in den Container passen k\u00f6nnen.\n<h3>Eigenschaften<\/h3>\n<ul style=\"font-family: \" montserrat\",sans-serif;\"=\"\">\n \t<li>Optional Responsive (Standardeinstellungen sind 'aus').<\/li>\n \t<li>Geringes Gewicht: weniger als 2KBs gzipped<\/li>\n \t<li>F\u00fcllen\/Ernten<\/li>\n \t<li>Ausrichten<\/li>\n \t<li>R\u00fcckrufe<\/li>\n \t<li>Svg-Unterst\u00fctzung<\/li>\n \t<li>Optionale Einblendungsanimation (Standardeinstellung ist \"aus\")<\/li>\n \t<li>Kompatibel mit allen Browsern (inkl. ie6)<\/li>\n<\/ul>\n<h3>Warum verwenden?<\/h3>\n<p align=\"justify\">Es ist ein sehr gutes Plugin f\u00fcr uns, um eine hohe Qualit\u00e4t des Bildes zu erhalten, besonders bei der Gr\u00f6\u00dfen\u00e4nderung. Sie haben sicher festgestellt, dass oft, wenn wir ein Bild von beliebiger Form hochladen, sei es vertikal oder horizontal, seine Qualit\u00e4t erheblich verschlechtert wird. Um die Bildqualit\u00e4t bei der Gr\u00f6\u00dfen\u00e4nderung beizubehalten, ist dieses Plugin daher sehr n\u00fctzlich.<\/p>\n\n<h3>Wie funktioniert das?<\/h3>\nEs funktioniert im Grunde nur, um das Bild in einen Container einzupassen oder dessen Gr\u00f6\u00dfe zu \u00e4ndern. Sie kann auch angepasst werden. Am einfachsten ist es, die JavaScript-Datei einzubinden und sie dann aufzurufen.\nZum Beispiel,\n<pre><code><script src=\"js\/imgLiquid-min.js\"><\/script> \/\/  including the javascript file<\/code><\/pre>\n<div class=\"imgLiquidFill imgLiquid\" style=\"width: 300px; height: 200px;\">\/\/ Bild zuweisen <img decoding=\"async\" src=\"user.jpg\" alt=\"Person\"><\/div>\n<pre><code>\n$(document).ready(function() { $(\".imgLiquidFill\").imgLiquid(); \/\/ Aufruf der Bildfl\u00fcssigkeit\n});<\/code><\/pre>\n<p align=\"justify\">Es w\u00fcrde das zugewiesene Bild ausblenden, d.h. <strong>(<img decoding=\"async\" src=\"user.jpg\" alt=\"Person\">)<\/strong> und w\u00fcrde das Bild in den Hintergrund des Divs einpassen, indem es in der Gr\u00f6\u00dfe ver\u00e4ndert wird.\nWenn Sie beim Aufruf der Funktion imageliquid \"fill: true\" w\u00e4hlen, d.h. <strong>($(\".imgLiquidFill\").imgLiquid(fill: true))<\/strong>w\u00e4hlen, wird das Bild in den Hintergrund des Divs eingef\u00fcgt. \u00c4hnlich verh\u00e4lt es sich, wenn Sie \"<strong>f\u00fcllen: false<\/strong>\", dann k\u00f6nnen Sie das Bild so sehen, wie Sie es hochgeladen haben. In beiden F\u00e4llen bleibt die Bildqualit\u00e4t erhalten.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-49bd3c8a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"49bd3c8a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7b0661a7\" data-id=\"7b0661a7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-59346dbf elementor-widget elementor-widget-heading\" data-id=\"59346dbf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Abonnieren Sie die neuesten Updates<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28099456 elementor-widget elementor-widget-shortcode\" data-id=\"28099456\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t\t\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t\t\tvar gCaptchaSibWidget;\n                        var onloadSibCallbackInvisible = function () {\n\n                            var element = document.getElementsByClassName('sib-default-btn');\n                            var countInvisible = 0;\n                            var indexArray = [];\n                            jQuery('.sib-default-btn').each(function (index, el) {\n                                if ((jQuery(el).attr('id') == \"invisible\")) {\n                                    indexArray[countInvisible] = index;\n                                    countInvisible++\n                                }\n                            });\n\n                            jQuery('.invi-recaptcha').each(function (index, el) {\n                                grecaptcha.render(element[indexArray[index]], {\n                                    'sitekey': jQuery(el).attr('data-sitekey'),\n                                    'callback': sibVerifyCallback,\n                                });\n                            });\n                        };\n\t\t\t\t\t<\/script>\n\t\t\t\t\t                <script src=\"https:\/\/www.google.com\/recaptcha\/api.js?onload=onloadSibCallbackInvisible&render=explicit\" async defer><\/script>\n\t\t\t\t\n\t\t\t<form id=\"sib_signup_form_1\" method=\"post\" class=\"sib_signup_form\" action=\"\">\n\t\t\t\t<div class=\"sib_loader\" style=\"display:none;\"><img\n\t\t\t\t\t\t\tsrc=\"https:\/\/www.railscarma.com\/wp-includes\/images\/spinner.gif\" alt=\"Lader\"><\/div>\n\t\t\t\t<input type=\"hidden\" name=\"sib_form_action\" value=\"subscribe_form_submit\">\n\t\t\t\t<input type=\"hidden\" name=\"sib_form_id\" value=\"1\">\n                <input type=\"hidden\" name=\"sib_form_alert_notice\" value=\"Please fill out this field\">\n                <input type=\"hidden\" name=\"sib_form_invalid_email_notice\" value=\"Your email address is invalid\">\n                <input type=\"hidden\" name=\"sib_security\" value=\"d7f7626ab9\">\n\t\t\t\t<div class=\"sib_signup_box_inside_1\">\n\t\t\t\t\t<div style=\"\/*display:none*\/\" class=\"sib_msg_disp\">\n\t\t\t\t\t<\/div>\n                                            <div id=\"sib_captcha_invisible\" class=\"invi-recaptcha\" data-sitekey=\"6LdikOAaAAAAAJ6SWrrKVQrtw7TQpQAEnv0HS0G3\"><\/div>\n                    \t\t\t\t\t<p class=\"sib-email-area\">\r\n    <label class=\"sib-email-area\"><\/label>\r\n    <input type=\"email\" class=\"sib-email-area\" name=\"email\" required=\"required\" placeholder=\"E-Mail-Adresse\">\r\n<\/p>\r\n<p class=\"sib-NAME-area\">\r\n    <label class=\"sib-NAME-area\"><\/label>\r\n    <input type=\"text\" class=\"sib-NAME-area\" name=\"NAME\" placeholder=\"Name\">\r\n<\/p>\r\n<p>\r\n    <input type=\"submit\" id=\"invisible\" class=\"sib-default-btn\" value=\"Abonnieren\">\r\n<\/p>\t\t\t\t<\/div>\n\t\t\t<input type=\"hidden\" name=\"trp-form-language\" value=\"de\"\/><\/form>\n\t\t\t<style>\n\t\t\t\tform#sib_signup_form_1 p.sib-alert-message {\n    padding: 6px 12px;\n    margin-bottom: 20px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\nform#sib_signup_form_1 p.sib-alert-message-error {\n    background-color: #f2dede;\n    border-color: #ebccd1;\n    color: #a94442;\n}\nform#sib_signup_form_1 p.sib-alert-message-success {\n    background-color: #dff0d8;\n    border-color: #d6e9c6;\n    color: #3c763d;\n}\nform#sib_signup_form_1 p.sib-alert-message-warning {\n    background-color: #fcf8e3;\n    border-color: #faebcc;\n    color: #8a6d3b;\n}\n\t\t\t<\/style>\n\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t  <div class=\"related-post slider\">\r\n        <div class=\"headline\">zusammenh\u00e4ngende Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Kaminari-Juwel\" href=\"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/kaminari-juwel\/?related_post_from=37277\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Kaminari-Juwel\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Kaminari-Juwel\" href=\"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/kaminari-juwel\/?related_post_from=37277\">\r\n        Kaminari-Juwel  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Warum sollte man im Jahr 2026 Ruby on Rails-Entwickler anheuern?\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/warum-sollte-man-ruby-on-rails-entwickler-engagieren\/?related_post_from=30627\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Warum sollte man im Jahr 2022 Ruby-on-Rails-Entwickler einstellen?\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Warum sollte man im Jahr 2026 Ruby on Rails-Entwickler anheuern?\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/warum-sollte-man-ruby-on-rails-entwickler-engagieren\/?related_post_from=30627\">\r\n        Warum sollte man im Jahr 2026 Ruby on Rails-Entwickler anheuern?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/bedeutung-der-softwarearchitektur-bei-der-entwicklung-von-unternehmenssoftware\/?related_post_from=36250\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/06\/Importance-of-Software-Architecture-in-enterprise-software-development-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/bedeutung-der-softwarearchitektur-bei-der-entwicklung-von-unternehmenssoftware\/?related_post_from=36250\">\r\n        Bedeutung der Softwarearchitektur in der Entwicklung von Unternehmenssoftware  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Ruby IDE: Die besten IDEs f\u00fcr die Ruby on Rails-Entwicklung\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/ruby-idee-die-besten-ideen-fur-die-ruby-on-rails-entwicklung\/?related_post_from=36125\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"BESTE IDEEN F\u00dcR DIE RUBY ON RAILS-ENTWICKLUNG\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2022\/01\/BEST-IDES-FOR-RUBY-ON-RAILS-DEVELOPMENT-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Ruby IDE: Die besten IDEs f\u00fcr die Ruby on Rails-Entwicklung\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ror\/ruby-idee-die-besten-ideen-fur-die-ruby-on-rails-entwicklung\/?related_post_from=36125\">\r\n        Ruby IDE: Die besten IDEs f\u00fcr die Ruby on Rails-Entwicklung  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 10px;\r\n      padding: 10px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 14px !important;\r\n      color: #999999 !important;\r\n          }\r\n\r\n    .related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 14px;\r\n      color: #000000;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 12px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 2,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 2,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: false,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: false,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>ImgLiquid ist ein jQuery-Plugin zur Gr\u00f6\u00dfenanpassung der Bilder, damit diese in den Container passen. Eigenschaften Optional Responsive (Standardeinstellungen sind 'off'). Lightweight: weniger als 2KBs gzipped Fill\/Crop Align CallBacks Svg Unterst\u00fctzung Optional FadeIn Anim (Standardeinstellungen sind 'off') Kompatibel mit allen Browsern (Incl. ie6) Warum zu verwenden? Es ist eine sehr gute ...<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.railscarma.com\/de\/blog\/ruby-regex-match-guide-with-examples\/\"> <span class=\"screen-reader-text\">Ruby Regex Match Guide (2026) mit Beispielen<\/span> Weiterlesen \u00bb<\/a><\/p>","protected":false},"author":1,"featured_media":31779,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[384],"tags":[],"class_list":["post-26582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-articles"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>jQuery Image Resizing Plugin: ImgLiquid - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development<\/title>\n<meta name=\"description\" content=\"ImgLiquid is a jQuery plugin for resizing the images so that these images can fit in the container. Features Optional Responsive (default settings are\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/jquery-bild-grosenanderung-plugin-imgliquid\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Image Resizing Plugin: ImgLiquid - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\" \/>\n<meta property=\"og:description\" content=\"ImgLiquid is a jQuery plugin for resizing the images so that these images can fit in the container. Features Optional Responsive (default settings are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/jquery-bild-grosenanderung-plugin-imgliquid\/\" \/>\n<meta property=\"og:site_name\" content=\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RailsCarma\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-24T12:16:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-05T09:12:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@railscarma\" \/>\n<meta name=\"twitter:site\" content=\"@railscarma\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21\"},\"headline\":\"jQuery Image Resizing Plugin: ImgLiquid\",\"datePublished\":\"2017-04-24T12:16:59+00:00\",\"dateModified\":\"2021-06-05T09:12:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/\"},\"wordCount\":253,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg\",\"articleSection\":[\"Technical Articles\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/\",\"url\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/\",\"name\":\"jQuery Image Resizing Plugin: ImgLiquid - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg\",\"datePublished\":\"2017-04-24T12:16:59+00:00\",\"dateModified\":\"2021-06-05T09:12:36+00:00\",\"description\":\"ImgLiquid is a jQuery plugin for resizing the images so that these images can fit in the container. Features Optional Responsive (default settings are\",\"breadcrumb\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg\",\"width\":800,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.railscarma.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Image Resizing Plugin: ImgLiquid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.railscarma.com\/#website\",\"url\":\"https:\/\/www.railscarma.com\/\",\"name\":\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\",\"description\":\"RailsCarma is a Ruby on Rails Development Company in Bangalore. We specialize in Offshore Ruby on Rails Development based out in USA and India. Hire experienced Ruby on Rails developers for the ultimate Web Experience.\",\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.railscarma.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.railscarma.com\/#organization\",\"name\":\"RailsCarma\",\"url\":\"https:\/\/www.railscarma.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"width\":200,\"height\":46,\"caption\":\"RailsCarma\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RailsCarma\/\",\"https:\/\/x.com\/railscarma\",\"https:\/\/www.linkedin.com\/company\/railscarma\/\",\"https:\/\/myspace.com\/railscarma\",\"https:\/\/in.pinterest.com\/railscarma\/\",\"https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/www.railscarma.com\/hire-ruby-on-rails-developer\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Image Resizing Plugin: ImgLiquid - RailsCarma - Ruby on Rails Entwicklungsunternehmen mit Spezialisierung auf Offshore-Entwicklung","description":"ImgLiquid ist ein jQuery-Plugin zur Gr\u00f6\u00dfenanpassung der Bilder, damit diese in den Container passen. Eigenschaften Optional Responsive (Standardeinstellungen sind","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:\/\/www.railscarma.com\/de\/blog\/fachartikel\/jquery-bild-grosenanderung-plugin-imgliquid\/","og_locale":"de_DE","og_type":"article","og_title":"jQuery Image Resizing Plugin: ImgLiquid - RailsCarma - Ruby on Rails Development Company specializing in Offshore Development","og_description":"ImgLiquid is a jQuery plugin for resizing the images so that these images can fit in the container. Features Optional Responsive (default settings are","og_url":"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/jquery-bild-grosenanderung-plugin-imgliquid\/","og_site_name":"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development","article_publisher":"https:\/\/www.facebook.com\/RailsCarma\/","article_published_time":"2017-04-24T12:16:59+00:00","article_modified_time":"2021-06-05T09:12:36+00:00","og_image":[{"width":800,"height":300,"url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@railscarma","twitter_site":"@railscarma","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#article","isPartOf":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/"},"author":{"name":"admin","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21"},"headline":"jQuery Image Resizing Plugin: ImgLiquid","datePublished":"2017-04-24T12:16:59+00:00","dateModified":"2021-06-05T09:12:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/"},"wordCount":253,"commentCount":0,"publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"image":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg","articleSection":["Technical Articles"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/","url":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/","name":"jQuery Image Resizing Plugin: ImgLiquid - RailsCarma - Ruby on Rails Entwicklungsunternehmen mit Spezialisierung auf Offshore-Entwicklung","isPartOf":{"@id":"https:\/\/www.railscarma.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage"},"image":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg","datePublished":"2017-04-24T12:16:59+00:00","dateModified":"2021-06-05T09:12:36+00:00","description":"ImgLiquid ist ein jQuery-Plugin zur Gr\u00f6\u00dfenanpassung der Bilder, damit diese in den Container passen. Eigenschaften Optional Responsive (Standardeinstellungen sind","breadcrumb":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#primaryimage","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2017\/04\/jQuery-Image-Resizing-Plugin-imgLiquid.jpg","width":800,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/jquery-image-resizing-plugin-imgliquid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.railscarma.com\/"},{"@type":"ListItem","position":2,"name":"jQuery Image Resizing Plugin: ImgLiquid"}]},{"@type":"WebSite","@id":"https:\/\/www.railscarma.com\/#website","url":"https:\/\/www.railscarma.com\/","name":"RailsCarma \u2013 Ruby on Rails-Entwicklungsunternehmen, spezialisiert auf Offshore-Entwicklung","description":"RailsCarma ist ein Ruby on Rails-Entwicklungsunternehmen in Bangalore. Wir sind auf die Offshore-Ruby-on-Rails-Entwicklung mit Sitz in den USA und Indien spezialisiert. Stellen Sie erfahrene Ruby on Rails-Entwickler f\u00fcr das ultimative Web-Erlebnis ein.","publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.railscarma.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.railscarma.com\/#organization","name":"SchienenCarma","url":"https:\/\/www.railscarma.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","width":200,"height":46,"caption":"RailsCarma"},"image":{"@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RailsCarma\/","https:\/\/x.com\/railscarma","https:\/\/www.linkedin.com\/company\/railscarma\/","https:\/\/myspace.com\/railscarma","https:\/\/in.pinterest.com\/railscarma\/","https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg"]},{"@type":"Person","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21","name":"Administrator","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/www.railscarma.com\/hire-ruby-on-rails-developer\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/posts\/26582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/comments?post=26582"}],"version-history":[{"count":0,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/posts\/26582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/media\/31779"}],"wp:attachment":[{"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/media?parent=26582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/categories?post=26582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.railscarma.com\/de\/wp-json\/wp\/v2\/tags?post=26582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}