{"id":1031,"date":"2017-03-20T11:12:59","date_gmt":"2017-03-20T05:42:59","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1031"},"modified":"2017-03-29T12:24:32","modified_gmt":"2017-03-29T06:54:32","slug":"auto-resize-image-fit-div-container","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/auto-resize-image-fit-div-container\/","title":{"rendered":"CSS – How to do auto-resize an image to fit a div container"},"content":{"rendered":"

Three ways to resize images to fit a DIV :<\/b><\/span><\/h4>\n
    \n
  • \n
    Two different CSS classes <\/b>(one for width, one for height).<\/h5>\n<\/li>\n
  • \n
    Using the STYLE attribute <\/b>within the IMG tag to manually set the width or height for each image (essentially the same as #1).<\/h5>\n<\/li>\n
  • \n
    Warning, exiting browser-side territory!<\/h6>\n<\/li>\n<\/ul>\n
      \n
    • To resize an image proportionally, you have to set either the height or width to \u201c100%\u201d, <\/b>but not both.<\/li>\n
    • If you set both to \u201c100%\u201d, your image will be stretched.<\/b><\/li>\n
    • Choosing whether to do height or width depends on your image and container dimensions<\/b>:<\/li>\n
    • If your image and container are both \u201cportrait shaped<\/b>\u201d or both \u201clandscape shaped<\/b>\u201d (taller than they are wide, or wider than they are tall, respectively), then it doesn\u2019t matter which of height or width are \u201c%100\u201c<\/b><\/li>\n
    • If your image is portrait<\/b>, and your container is landscape, you must set height=\u201d100%\u201d <\/b>on the image.<\/li>\n
    • If your image is landscape<\/b>, and your container is portrait, you must set width=\u201d100%\u201d <\/b>on the image.<\/li>\n
    • If your image is an SVG<\/b>, which is a variable-sized vector image <\/b>format, you can have the expansion to fit the container happen automatically.<\/li>\n
    • You just have to ensure that the SVG file has none of these properties set in the <<\/b>svg<\/b>> tag<\/b>:\n
        \n
      1. height<\/li>\n
      2. width<\/li>\n
      3. viewbox<\/li>\n<\/ol>\n<\/li>\n
      4. Most vector drawing programs out there will set these properties when exporting an SVG file, so you will have to manually edit your file <\/b>every time you export, or write a script to do it.<\/li>\n<\/ul>\n

        Example Image:<\/b><\/span><\/h4>\n

        \"\"Two different CSS classes (one for width, one for height) :<\/b><\/span><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Cstyle%3E%0A%23img_box%0A%7B%0A%20width%3A90%25%3B%0A%20height%3A90%25%3B%0A%7D%0A.resize_horizontal%0A%7B%0A%20width%3A100%25%3B%0A%7D%0A.resize_vertical%0A%7B%0A%20height%3A100%25%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20id%3D%22img_box%22%3E%0A%20%3Cimg%20class%3D%22resize_horizontal%22%20src%3D%22path%2Fto%2Fhorizontal_image.jpg%22%20%2F%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22img_box%22%3E%0A%20%3Cimg%20class%3D%22resize_vertical%22%20src%3D%22path%2Fto%2Fvertical_image.jpg%22%20%2F%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"

        Three ways to resize images to fit a DIV : Two different CSS classes (one for width, one for height). Using the STYLE attribute within the IMG tag to manually set the width or height for each image (essentially the same as #1). Warning, exiting browser-side territory! To resize an image proportionally, you have to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[2064,2078,2079,2065,2071,2077,2073,2075,2066,2063,120,2074,2069,2068,2076,2072,2067,2070],"class_list":["post-1031","post","type-post","status-publish","format-standard","hentry","category-css","tag-auto-resize-an-image-to-fit-its-div-container-using-css","tag-auto-resize-image-css","tag-auto-resize-image-html","tag-auto-resize-image-to-fill-container-div-javascript","tag-background-image-auto-resize","tag-background-image-fit-to-div","tag-fit-image-inside-div","tag-fit-image-to-div-without-stretching","tag-how-to-auto-resize-an-image-to-fit-div-container-in-html","tag-html-resize-an-image-to-fit-in-div","tag-html-resize-image-to-fit-screen","tag-image-auto-resize-to-fit-div-container","tag-interactive-site","tag-object-fit","tag-object-fit-contain","tag-stretch-image-proportionally-to-fit-width-of-container","tag-three-ways-to-resize-images-to-fit-a-div","tag-using-div-for-logo"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}