{"id":1173,"date":"2020-05-24T18:33:33","date_gmt":"2020-05-24T18:33:33","guid":{"rendered":"https:\/\/kalkus.dev\/?p=1173"},"modified":"2023-08-24T23:32:47","modified_gmt":"2023-08-24T23:32:47","slug":"how-to-get-div-height-to-auto-adjust-to-background-size","status":"publish","type":"post","link":"https:\/\/kalkus.dev\/blog\/2020\/05\/24\/how-to-get-div-height-to-auto-adjust-to-background-size\/","title":{"rendered":"How to get div height to auto-adjust to background size?"},"content":{"rendered":"\n<p><strong>Problem<\/strong>: when we set a background image on div the div size doesn\u2019t adjust to background image size.<\/p>\n\n\n\n<p><strong>Solution:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">height: calc(imageRatio * 100vw);<\/pre>\n\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>First, we need to get the ratio from the background image. We simply divide one dimension by another. Then we get something like for example 66.4%<\/p>\n\n\n\n<p>When we have image ratio we can simply calculate the height of the div by multiplying the ratio by viewport width:  calc(0.664 * 100vw)<\/p>\n\n\n\n<p>A height of a div is automatically updated when the window is resized.<\/p>\n\n\n\n<p>See also: my answer on StackOverflow &#8211; <a href=\"https:\/\/stackoverflow.com\/a\/61990449\/3775079\">https:\/\/stackoverflow.com\/a\/61990449\/3775079<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem: when we set a background image on div the div size doesn\u2019t adjust to background image size. Solution: Explanation: First, we need to get the ratio from the background image. We simply divide one dimension by another. Then we get something like for example 66.4% When we have image ratio we can simply calculate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[202,76],"tags":[134],"_links":{"self":[{"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/posts\/1173"}],"collection":[{"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/comments?post=1173"}],"version-history":[{"count":2,"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/posts\/1173\/revisions"}],"predecessor-version":[{"id":1179,"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/posts\/1173\/revisions\/1179"}],"wp:attachment":[{"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/categories?post=1173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kalkus.dev\/blog\/wp-json\/wp\/v2\/tags?post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}