{"id":8538,"date":"2021-05-24T09:15:58","date_gmt":"2021-05-24T09:15:58","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/en\/?p=6484"},"modified":"2025-07-18T14:54:46","modified_gmt":"2025-07-18T14:54:46","slug":"images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/","title":{"rendered":"Images of varying aspect ratio, fill available space, but keep heights equal"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"3308.0625\" data-cache-vw-t=\"617\" data-cache-h-t=\"2914.0546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"6330.046875\"><div class=\"col all\"><p>Placing images side by side, while keeping the same height, regardless of their aspect ratio, is easy ... just set the height to 500 pixels.. <strong>No, that's not a <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/responsive-web-design\/\">responsive approach to web design<\/a>, because that way you won't know the total width of all images side by side.<\/strong><\/p><p>What if you want to fill the space that is available (which you don't know to begin with)? CSS property <span class=\"code css-code\">flex-grow<\/span> gives you the power to make the images fill up available space by growing. The images start at 0px wide, and grow as much as they can fill up space.<\/p><p>How much an image will grow as opposed to other images, depends on the value supplied for <span class=\"code css-code\">flex-grow<\/span>. Such a value is a numeric value, without a unit.<\/p><p>Portrait images should not grow too much, because those would otherwise get too high. Landscape images should grow more, because otherwise those would not get high enough. How much an image will grow, depends on their aspect ratio as the formula.<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>Add HTML for flexbox with images<\/h2><p>Add the following HTML (change it according to your images):<\/p><tw-pre><code class=\"html-code\">&lt;div class=\"tw-equal-height-images\"&gt;\r\n  &lt;img src=\"...\" width=\"810\" height=\"1440\" style=\"flex-grow:calc(810\/1440);\"&gt;\r\n  &lt;img src=\"...\" width=\"1152\" height=\"1536\" style=\"flex-grow:calc(1152\/1536);\"&gt;\r\n  &lt;img src=\"...\" width=\"1600\" height=\"900\" style=\"flex-grow:calc(1600\/900);\"&gt;\r\n&lt;\/div&gt;<\/code><\/tw-pre><p>Notice that I manually added the <span class=\"code css-code\">flex-grow<\/span> property as inline CSS. You could also apply <span class=\"code css-code\">flex-grow<\/span> automatically. Which I will explain after you've created the layout.<\/p><h2>Add CSS to create the layout<\/h2><p>Now, add the following CSS to create the layout:<\/p><tw-pre><code class=\"css-code\">  .tw-equal-height-images {\r\n    display: flex;\r\n  }\r\n  .tw-equal-height-images img {\r\n    display: block;\r\n    flex-basis: 0px;\r\n    width: 0px;\r\n    height: auto;\r\n  }<\/code><\/tw-pre><h3>Make sure the layout is responsive<\/h3><p>Depending on how many images, and what images, you might want to wrap them when it comes to a certain width. If you put two landscape images next to eachother on a small screen, such as a smartphone screen, then they are hard to see and read.<\/p><p>I suggest making landscape images and square images take up the full width on it's own. If you are lucky you can place two portrait images next to eachother on smaller screens.<\/p><p>The latter may require you to <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/order-items-with-css-on-specific-devices\/\" target=\"_blank\" rel=\"noopener\">reorder those items, depending on the device being used<\/a>.<\/p><h3>You can add margin and padding, that's no problem<\/h3><p>You can add margin and padding, the images will adapt and still have the same height as each other and will fill up available space, while taking margin and padding into account.<\/p><h2>Applying flex-grow automatically<\/h2><p>If you do not like to manually add <span class=\"code css-code\">flex-grow<\/span> as inline CSS everytime, then I've got you covered. I suggest doing this with PHP (or using any other backend language) instead of JavaScript, because JavaScript causes reflows.<\/p><p>By using <a href=\"https:\/\/www.php.net\/manual\/en\/class.domdocument.php\" target=\"_blank\" rel=\"noopener\">PHP's built-in HTML parser<\/a>, which I like to use for a lot of things to cut down on JavaScript usage, you can query for images that have a width and height specified.<\/p><p>Then you can simply add the inline CSS style by using the width and height attributes.<\/p><p>However, you will need to collect all the HTML before outputting it, because PHP's HTML parser needs the HTML in order to create a document that you will perform queries on.<\/p><p>You can do this by calling <code>ob_start()<\/code> before you output any HTML, and at the end you collect the HTML from the buffer by calling <code>ob_get_clean()<\/code> and putting it into a variable.<\/p><tw-pre><code class=\"php-code\">\/\/ Start output buffering\r\nob_start();\r\n\r\n\/* ... (anything that happens in between, such as outputting HTML) *\/\r\n\r\n\/\/ Stop output buffering and add to variable\r\n$buffer = ob_get_clean();\r\n\r\n\/\/ Create document object\r\n$doc = new DOMDocument();\r\n\r\n\/\/ Load HTML into the document\r\n$doc -&gt; loadHTML($buffer);\r\n\r\n\/\/ Create an XPath object to use for querying\r\n$xPath = new DOMXPath($doc);\r\n\r\n\r\n$allFlexboxesWithEqualHeightImages = $xPath -&gt; query (\r\n  '\/\/*[contains(@class, 'tw-equal-height-images')]'\r\n  <mark><strong>\/\/ Change the class name above if you've changed it in the HTML<\/strong><\/mark>\r\n);\r\n\r\nforeach($allFlexboxesWithEqualHeightImages as $flexboxWithEqualHeightImages) {\r\n  $images = $flexboxWithEqualHeightImages -&gt; getElementsByTagName('img');\r\n  foreach($images as $image) {\r\n    if (\r\n      $image -&gt; hasAttribute('width')\r\n      &amp;&amp;\r\n      $image -&gt; hasAttribute('height')\r\n    ) {\r\n      $imageWidth = $image -&gt; getAttribute('width');\r\n      $imageHeight = $image -&gt; getAttribute('height');\r\n      $styleToAdd = 'flex-grow:calc(' . $imageWidth . '\/' . $imageHeight . ');';\r\n      \r\n      if($image -&gt; hasAttribute('style')) {\r\n        $image -&gt; setAttribute (\r\n          'style',\r\n          $styleToAdd . $image -&gt; getAttribute('style')\r\n        );\r\n      } else {\r\n        $image -&gt; setAttribute (\r\n          'style',\r\n          $styleToAdd\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n$html = '&lt;!DOCTYPE html&gt;' . $doc -&gt; saveHTML($doc -&gt; documentElement);\r\n$html = preg_replace('\/&lt;\/wbr&gt;\/is', '', $html);\r\n$html = preg_replace('\/&lt;\/source&gt;\/is', '', $html);\r\necho $html;\r\n<\/code><\/tw-pre><p>Now you do not have to apply <span class=\"code css-code\">flex-grow<\/span> manually. What would have been great, is if CSS had a value like <span class=\"code css-code\">currentColor<\/span>, but instead for the image's natural width and height.<\/p><p>Then you would have been able to use that in the formula via external CSS, instead of manually adding the width and height as inline CSS into a formula or by using PHP.<\/p><p><strong>This code has been tested and is actually used to show designs on the portfolio of this website on a smartphone, tablet, and a desktop screen, side by side, filling up the space that is available while maintaining their aspect ratio and all having the same height.<\/strong><\/p><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Placing images side by side, while keeping the same height, regardless of their aspect ratio, is easy &#8230; just set the height to 500 pixels.. No, that&#8217;s not a responsive approach to web design, because that way you won&#8217;t know the total width of all images side by side.What if you want to fill the <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":6495,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-8538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Images of varying aspect ratio, fill available space, but keep heights equal<\/title>\n<meta name=\"description\" content=\"Learn how to make images, with varying aspect ratios, fill up available space, while keeping their heights equal. Pure CSS, no JavaScript.\" \/>\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.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Images of varying aspect ratio, fill available space, but keep heights equal\" \/>\n<meta property=\"og:description\" content=\"Learn how to make images, with varying aspect ratios, fill up available space, while keeping their heights equal. Pure CSS, no JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-24T09:15:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:54:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Images of varying aspect ratio, fill available space, but keep heights equal\",\"datePublished\":\"2021-05-24T09:15:58+00:00\",\"dateModified\":\"2025-07-18T14:54:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\",\"name\":\"Images of varying aspect ratio, fill available space, but keep heights equal\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg\",\"datePublished\":\"2021-05-24T09:15:58+00:00\",\"dateModified\":\"2025-07-18T14:54:46+00:00\",\"description\":\"Learn how to make images, with varying aspect ratios, fill up available space, while keeping their heights equal. Pure CSS, no JavaScript.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg\",\"width\":1200,\"height\":676,\"caption\":\"Fill available space with images of any aspect ratio while keeping heights equal, using flex-grow\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Images of varying aspect ratio, fill available space, but keep heights equal","description":"Learn how to make images, with varying aspect ratios, fill up available space, while keeping their heights equal. Pure CSS, no JavaScript.","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.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/","og_locale":"en_US","og_type":"article","og_title":"Images of varying aspect ratio, fill available space, but keep heights equal","og_description":"Learn how to make images, with varying aspect ratios, fill up available space, while keeping their heights equal. Pure CSS, no JavaScript.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2021-05-24T09:15:58+00:00","article_modified_time":"2025-07-18T14:54:46+00:00","og_image":[{"width":1200,"height":676,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg","type":"image\/jpeg"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Images of varying aspect ratio, fill available space, but keep heights equal","datePublished":"2021-05-24T09:15:58+00:00","dateModified":"2025-07-18T14:54:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/"},"wordCount":12,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg","articleSection":["Blog","CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/","name":"Images of varying aspect ratio, fill available space, but keep heights equal","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg","datePublished":"2021-05-24T09:15:58+00:00","dateModified":"2025-07-18T14:54:46+00:00","description":"Learn how to make images, with varying aspect ratios, fill up available space, while keeping their heights equal. Pure CSS, no JavaScript.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/images-of-varying-aspect-ratio-fill-available-space-but-keep-heights-equal\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/images-of-varying-aspect-ratio-fill-space-keep-same-height.jpg","width":1200,"height":676,"caption":"Fill available space with images of any aspect ratio while keeping heights equal, using flex-grow"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=8538"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8538\/revisions"}],"predecessor-version":[{"id":9084,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8538\/revisions\/9084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/6495"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=8538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=8538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=8538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}