<!doctype html><html data-n-head-ssr> <head > <meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" property="twitter:site" content="@devhubbycom"><meta data-n-head="ssr" property="twitter:creator" content="@devhubbycom"><meta data-n-head="ssr" property="twitter:title" content="How to proportionally resize image in css?"><meta data-n-head="ssr" property="twitter:description" content="How to proportionally resize image in css?"><meta data-n-head="ssr" property="twitter:image" content="https://forum-static.fra1.cdn.digitaloceanspaces.com/images/c64c6733-bfad-4db8-b387-18207476d4d5/thread/2022/71eb8cd8-27eb-4527-ad03-6d7602209e79.png"><meta data-n-head="ssr" property="twitter:card" content="summary_large_image"><meta data-n-head="ssr" property="og:title" content="How to proportionally resize image in css?"><meta data-n-head="ssr" property="og:url" content="https://devhubby.com/thread/how-to-proportionally-resize-image-in-css"><meta data-n-head="ssr" property="og:image" content="https://forum-static.fra1.cdn.digitaloceanspaces.com/images/c64c6733-bfad-4db8-b387-18207476d4d5/thread/2022/71eb8cd8-27eb-4527-ad03-6d7602209e79.png"><meta data-n-head="ssr" property="og:description" content="How to proportionally resize image in css?"><meta data-n-head="ssr" property="og:site_name" content="Software Developer Questions and Answers"><meta data-n-head="ssr" data-hid="description" name="description" content="How to proportionally resize image in css?"><title>How to proportionally resize image in css?</title><link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto"><link data-n-head="ssr" rel="stylesheet" href="https://forum-static.fra1.cdn.digitaloceanspaces.com/css/c64c6733-bfad-4db8-b387-18207476d4d5/custom.css"><link data-n-head="ssr" rel="icon" type="image/png" href="https://forum-static.fra1.cdn.digitaloceanspaces.com/images/c64c6733-bfad-4db8-b387-18207476d4d5/favicon.png"><link data-n-head="ssr" data-hid="i18n-can" rel="canonical" href="https://devhubby.com/thread/how-to-proportionally-resize-image-in-css"><style data-n-head="vuetify" type="text/css" id="vuetify-theme-stylesheet" nonce="undefined">.v-application a { color: #ff6b00; }.v-application .primary { background-color: #ff6b00 !important; border-color: #ff6b00 !important;}.v-application .primary--text { color: #ff6b00 !important; caret-color: #ff6b00 !important;}.v-application .primary.lighten-5 { background-color: #fff897 !important; border-color: #fff897 !important;}.v-application .primary--text.text--lighten-5 { color: #fff897 !important; caret-color: #fff897 !important;}.v-application .primary.lighten-4 { background-color: #ffdb7b !important; border-color: #ffdb7b !important;}.v-application .primary--text.text--lighten-4 { color: #ffdb7b !important; caret-color: #ffdb7b !important;}.v-application .primary.lighten-3 { background-color: #ffbe60 !important; border-color: #ffbe60 !important;}.v-application .primary--text.text--lighten-3 { color: #ffbe60 !important; caret-color: #ffbe60 !important;}.v-application .primary.lighten-2 { background-color: #ffa245 !important; border-color: #ffa245 !important;}.v-application .primary--text.text--lighten-2 { color: #ffa245 !important; caret-color: #ffa245 !important;}.v-application .primary.lighten-1 { background-color: #ff8629 !important; border-color: #ff8629 !important;}.v-application .primary--text.text--lighten-1 { color: #ff8629 !important; caret-color: #ff8629 !important;}.v-application .primary.darken-1 { background-color: #de5000 !important; border-color: #de5000 !important;}.v-application .primary--text.text--darken-1 { color: #de5000 !important; caret-color: #de5000 !important;}.v-application .primary.darken-2 { background-color: #be3400 !important; border-color: #be3400 !important;}.v-application .primary--text.text--darken-2 { color: #be3400 !important; caret-color: #be3400 !important;}.v-application .primary.darken-3 { background-color: #9f1100 !important; border-color: #9f1100 !important;}.v-application .primary--text.text--darken-3 { color: #9f1100 !important; caret-color: #9f1100 !important;}.v-application .primary.darken-4 { background-color: #810000 !important; border-color: #810000 !important;}.v-application .primary--text.text--darken-4 { color: #810000 !important; caret-color: #810000 !important;}.v-application .secondary { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .secondary--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .secondary.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .secondary--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .secondary.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .secondary--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .secondary.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .secondary--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .secondary.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .secondary--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .secondary.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .secondary--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .secondary.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .secondary--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .secondary.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .secondary--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .secondary.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .secondary--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .secondary.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .secondary--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .accent { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .accent--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .accent.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .accent--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .accent.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .accent--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .accent.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .accent--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .accent.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .accent--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .accent.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .accent--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .accent.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .accent--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .accent.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .accent--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .accent.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .accent--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .accent.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .accent--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .error { background-color: #ff6b00 !important; border-color: #ff6b00 !important;}.v-application .error--text { color: #ff6b00 !important; caret-color: #ff6b00 !important;}.v-application .error.lighten-5 { background-color: #fff897 !important; border-color: #fff897 !important;}.v-application .error--text.text--lighten-5 { color: #fff897 !important; caret-color: #fff897 !important;}.v-application .error.lighten-4 { background-color: #ffdb7b !important; border-color: #ffdb7b !important;}.v-application .error--text.text--lighten-4 { color: #ffdb7b !important; caret-color: #ffdb7b !important;}.v-application .error.lighten-3 { background-color: #ffbe60 !important; border-color: #ffbe60 !important;}.v-application .error--text.text--lighten-3 { color: #ffbe60 !important; caret-color: #ffbe60 !important;}.v-application .error.lighten-2 { background-color: #ffa245 !important; border-color: #ffa245 !important;}.v-application .error--text.text--lighten-2 { color: #ffa245 !important; caret-color: #ffa245 !important;}.v-application .error.lighten-1 { background-color: #ff8629 !important; border-color: #ff8629 !important;}.v-application .error--text.text--lighten-1 { color: #ff8629 !important; caret-color: #ff8629 !important;}.v-application .error.darken-1 { background-color: #de5000 !important; border-color: #de5000 !important;}.v-application .error--text.text--darken-1 { color: #de5000 !important; caret-color: #de5000 !important;}.v-application .error.darken-2 { background-color: #be3400 !important; border-color: #be3400 !important;}.v-application .error--text.text--darken-2 { color: #be3400 !important; caret-color: #be3400 !important;}.v-application .error.darken-3 { background-color: #9f1100 !important; border-color: #9f1100 !important;}.v-application .error--text.text--darken-3 { color: #9f1100 !important; caret-color: #9f1100 !important;}.v-application .error.darken-4 { background-color: #810000 !important; border-color: #810000 !important;}.v-application .error--text.text--darken-4 { color: #810000 !important; caret-color: #810000 !important;}.v-application .info { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .info--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .info.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .info--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .info.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .info--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .info.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .info--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .info.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .info--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .info.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .info--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .info.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .info--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .info.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .info--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .info.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .info--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .info.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .info--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .success { background-color: #0095ff !important; border-color: #0095ff !important;}.v-application .success--text { color: #0095ff !important; caret-color: #0095ff !important;}.v-application .success.lighten-5 { background-color: #d3ffff !important; border-color: #d3ffff !important;}.v-application .success--text.text--lighten-5 { color: #d3ffff !important; caret-color: #d3ffff !important;}.v-application .success.lighten-4 { background-color: #b3ffff !important; border-color: #b3ffff !important;}.v-application .success--text.text--lighten-4 { color: #b3ffff !important; caret-color: #b3ffff !important;}.v-application .success.lighten-3 { background-color: #92e6ff !important; border-color: #92e6ff !important;}.v-application .success--text.text--lighten-3 { color: #92e6ff !important; caret-color: #92e6ff !important;}.v-application .success.lighten-2 { background-color: #70cbff !important; border-color: #70cbff !important;}.v-application .success--text.text--lighten-2 { color: #70cbff !important; caret-color: #70cbff !important;}.v-application .success.lighten-1 { background-color: #49afff !important; border-color: #49afff !important;}.v-application .success--text.text--lighten-1 { color: #49afff !important; caret-color: #49afff !important;}.v-application .success.darken-1 { background-color: #007ce2 !important; border-color: #007ce2 !important;}.v-application .success--text.text--darken-1 { color: #007ce2 !important; caret-color: #007ce2 !important;}.v-application .success.darken-2 { background-color: #0063c6 !important; border-color: #0063c6 !important;}.v-application .success--text.text--darken-2 { color: #0063c6 !important; caret-color: #0063c6 !important;}.v-application .success.darken-3 { background-color: #004caa !important; border-color: #004caa !important;}.v-application .success--text.text--darken-3 { color: #004caa !important; caret-color: #004caa !important;}.v-application .success.darken-4 { background-color: #00368f !important; border-color: #00368f !important;}.v-application .success--text.text--darken-4 { color: #00368f !important; caret-color: #00368f !important;}.v-application .warning { background-color: #ff6b00 !important; border-color: #ff6b00 !important;}.v-application .warning--text { color: #ff6b00 !important; caret-color: #ff6b00 !important;}.v-application .warning.lighten-5 { background-color: #fff897 !important; border-color: #fff897 !important;}.v-application .warning--text.text--lighten-5 { color: #fff897 !important; caret-color: #fff897 !important;}.v-application .warning.lighten-4 { background-color: #ffdb7b !important; border-color: #ffdb7b !important;}.v-application .warning--text.text--lighten-4 { color: #ffdb7b !important; caret-color: #ffdb7b !important;}.v-application .warning.lighten-3 { background-color: #ffbe60 !important; border-color: #ffbe60 !important;}.v-application .warning--text.text--lighten-3 { color: #ffbe60 !important; caret-color: #ffbe60 !important;}.v-application .warning.lighten-2 { background-color: #ffa245 !important; border-color: #ffa245 !important;}.v-application .warning--text.text--lighten-2 { color: #ffa245 !important; caret-color: #ffa245 !important;}.v-application .warning.lighten-1 { background-color: #ff8629 !important; border-color: #ff8629 !important;}.v-application .warning--text.text--lighten-1 { color: #ff8629 !important; caret-color: #ff8629 !important;}.v-application .warning.darken-1 { background-color: #de5000 !important; border-color: #de5000 !important;}.v-application .warning--text.text--darken-1 { color: #de5000 !important; caret-color: #de5000 !important;}.v-application .warning.darken-2 { background-color: #be3400 !important; border-color: #be3400 !important;}.v-application .warning--text.text--darken-2 { color: #be3400 !important; caret-color: #be3400 !important;}.v-application .warning.darken-3 { background-color: #9f1100 !important; border-color: #9f1100 !important;}.v-application .warning--text.text--darken-3 { color: #9f1100 !important; caret-color: #9f1100 !important;}.v-application .warning.darken-4 { background-color: #810000 !important; border-color: #810000 !important;}.v-application .warning--text.text--darken-4 { color: #810000 !important; caret-color: #810000 !important;}</style><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/7b8ec9d.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/25edc65.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/1b7ab17.css" as="style"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/863688a.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/87b7056.css" as="style"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/cb42003.js" as="script"><link rel="stylesheet" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/1b7ab17.css"><link rel="stylesheet" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/87b7056.css"> </head> <body > <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div data-app="true" id="app" class="v-application v-application--is-ltr theme--light" style="font-family:Roboto;"><div class="v-application--wrap"><div tabindex="0" aria-label="Loading" class="vld-overlay is-active is-full-page" style="z-index:999;display:none;"><div class="vld-background" style="background:#fff;opacity:0.5;"></div><div class="vld-icon"><svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" width="65" height="65" stroke="#1976d2"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".25" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.8s" repeatCount="indefinite"></animateTransform></path></g></g></svg></div></div> <!----> <div class="header-section"><header class="v-sheet theme--light elevation-3 v-toolbar v-app-bar v-app-bar--fixed" style="height:56px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;"><div class="v-toolbar__content" style="height:56px;"><div class="row main-menu"><div role="dialog" class="v-dialog__container"><!----></div> <div role="dialog" class="v-dialog__container"><!----></div> <div class="d-none d-lg-flex d-xl-flex d-md-flex justify-space-between pb-5 col col-12"><div class="d-flex align-center col-md-2 col-lg-1 offset-lg-1 col-4"><a href="/" class="d-flex w-100 nuxt-link-active"><div class="logo d-flex w-100"><div aria-label="Software Developer Questions and Answers" role="img" class="v-image v-responsive theme--light" style="max-height:50px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></a></div> <!----> <div class="col-md-5 col-lg-5 offset-lg-1 col-4"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default primary--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></span></button> <a href="/login" class="v-btn v-btn--contained v-btn--router theme--light v-size--default success"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-message-question-outline theme--light"></i> <span class="d-none d-lg-flex d-xl-flex">Ask Question</span></span></a> <a href="/login" class="v-btn v-btn--depressed v-btn--flat v-btn--outlined v-btn--router theme--light v-size--default success--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-login theme--light"></i><span class="d-none d-lg-flex d-xl-flex">Sign In</span></span></a> <a href="/register" class="v-btn v-btn--depressed v-btn--flat v-btn--outlined v-btn--router theme--light v-size--default info--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-account-plus-outline theme--light"></i><span class="d-none d-lg-flex d-xl-flex">Sign Up</span></span></a></div></div> <nav class="hidden-md-and-up v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile v-navigation-drawer--temporary theme--light" style="height:100vh;top:0px;transform:translateX(-100%);width:256px;"><div class="v-navigation-drawer__content"><div class="v-list v-sheet theme--light"><a href="/" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Home</div></div></a> <!----> <!----> <!----> <!----> <a href="/login" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Sign In</div></div></a> <a href="/register" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Sign Up</div></div></a> <!----></div></div><div class="v-navigation-drawer__border"></div></nav> <header class="hidden-md-and-up v-sheet theme--light v-toolbar v-app-bar v-app-bar--fixed" style="height:56px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;"><div class="v-toolbar__content" style="height:56px;"><div class="row align-center"><button type="button" class="v-app-bar__nav-icon v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu theme--light"></i></span></button> <div class="d-flex col-10 pr-0 align-center justify-end"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default primary--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></span></button> <a href="/login" class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--router theme--light v-size--default success--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-message-question-outline theme--light"></i></span></a> <div class="col-sm-3 col-md-3 col-4"><a href="/" class="nuxt-link-active"><div class="logo d-flex w-100"><div aria-label="Software Developer Questions and Answers" role="img" class="v-image v-responsive theme--light" style="max-height:50px;"><div class="v-responsive__sizer" style="padding-bottom:100%;"></div><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></a></div></div></div></div></header></div></div></header></div> <div class="container"><!----> <div class="flex"><ul itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" class="v-breadcrumbs v-breadcrumbs--large theme--light"><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="/" itemprop="item" class="v-breadcrumbs__item nuxt-link-active"><span itemprop="name">Home</span></a> <meta content="1" itemprop="position"></li><li class="v-breadcrumbs__divider">></li><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="/forum/html-css" itemprop="item" class="v-breadcrumbs__item"><span itemprop="name">HTML/CSS</span></a> <meta content="2" itemprop="position"></li><li class="v-breadcrumbs__divider">></li><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="#" itemprop="item" class="v-breadcrumbs__item v-breadcrumbs__item--disabled"><span itemprop="name">How to proportionally resize image in css?</span></a> <meta content="3" itemprop="position"></li></ul></div> <div class="row mx-0 mt-1"><div class="flex md4 lg3 xl2"><div><div class="row d-md-none justify-space-around"><div class="py-0 col-sm-10 col-md-8 col-12"><div class="px-1 transparent v-sheet theme--light"><div class="v-item-group theme--light v-slide-group v-chip-group"><div class="v-slide-group__prev v-slide-group__prev--disabled"><!----></div><div class="v-slide-group__wrapper"><div class="v-slide-group__content"></div></div><div class="v-slide-group__next v-slide-group__next--disabled"><!----></div></div></div></div></div> <div class="row d-none d-lg-flex d-xl-flex d-md-flex pr-3"><div class="w-100 v-card v-sheet theme--light"><header class="v-sheet theme--dark v-toolbar info" style="height:56px;"><div class="v-toolbar__content" style="height:56px;"><div class="v-toolbar__title">Category</div></div></header> <div style="max-height:800px;overflow-y:auto;"></div></div> <!----></div></div></div> <div class="flex pl-lg-4 pl-md-4 pl-xl-4 md8 lg9 xl10"><div class="flex"><div itemscope="itemscope" itemtype="http://schema.org/DiscussionForumPosting" class="row"><div class="col-sm-12 col-md-8 col-lg-8 col-12"><h1 itemprop="headline">How to proportionally resize image in css?</h1></div> <div class="text-md-right text-center col-sm-12 col-md-4 col-lg-4 col-12"><!----> <!----> <button type="button" class="v-btn v-btn--contained theme--dark v-size--default primary"><span class="v-btn__content">New message </span></button></div></div> <div role="dialog" class="v-dialog__container"><!----></div> <div class="row"><div class="col col-12"><div class="v-card v-sheet theme--light"><div role="list" class="v-list v-sheet theme--light"><div tabindex="-1" role="listitem" class="v-list-item theme--light"><div class="row thread-row" data-v-3262fcae><!----> <!----> <!----> <!----> <!----> <div class="row mx-3" data-v-3262fcae data-v-3262fcae><div class="col-sm-3 col-md-3 col-lg-2 col-xl-1 col-12" data-v-3262fcae data-v-3262fcae><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-3262fcae><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="sofia.thiel" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Member</p> <div><a href="/profile/sofia.thiel" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> sofia.thiel </p></a></div> <!----></div></div> <div class="py-0 col-sm-9 col-md-9 col-lg-10 col-xl-11 col-12" data-v-3262fcae data-v-3262fcae><!----> <div class="py-0 col col-12" data-v-3262fcae data-v-3262fcae><span class="caption" data-v-3262fcae>by <a href="/profile/sofia.thiel" class="d-inline-flex caption" data-v-3262fcae> sofia.thiel </a></span>, <span class="caption" data-v-3262fcae>in category: </span> <span class="caption" data-v-3262fcae><a href="/forum/html-css" class="d-inline-flex caption" data-v-3262fcae> HTML/CSS </a></span>, <span class="caption" data-v-3262fcae>3 years ago</span></div> <!----> <!----></div> <div class="col col-12" data-v-3262fcae data-v-3262fcae><div class="forum-text ql-viewer" data-v-3262fcae><p>How to proportionally resize image in css?</p></div> <div class="d-flex justify-start flex-wrap flex-lg-nowrap flex-md-nowrap flex-xl-nowrap flex-sm-nowrap" data-v-3262fcae><div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-3262fcae data-v-3262fcae><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-3262fcae><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF6B00;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="52 likes" class="like-dislike-buttons__count" data-v-0348114a>52</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="no dislikes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">52</span></span></span></div></div> <div class="col-sm-7 col-md-8 col-lg-10 col-xl-10 col-12" data-v-3262fcae data-v-3262fcae><div class="justify-center icons d-flex col col-12" data-v-11d4c0a4 data-v-11d4c0a4 data-v-3262fcae><a href="https://www.facebook.com/sharer.php?src=sp&u=https%3A%2F%2Fdevhubby.com%2Fthread%2Fhow-to-proportionally-resize-image-in-css&quote=How%20to%20proportionally%20resize%20image%20in%20css%3F&hashtag=%23mywebforum" rel="nofollow noopener" target="_blank" title="Facebook" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/fb.png" width="32" height="32" alt="Facebook" data-v-11d4c0a4></a> <!----> <!----> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdevhubby.com%2Fthread%2Fhow-to-proportionally-resize-image-in-css&text=How%20to%20proportionally%20resize%20image%20in%20css%3F&hashtags=mywebforum" rel="nofollow noopener" target="_blank" title="Twitter" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/twitter.png" width="32" height="32" alt="Twitter" data-v-11d4c0a4></a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdevhubby.com%2Fthread%2Fhow-to-proportionally-resize-image-in-css" rel="nofollow noopener" target="_blank" title="LinkedIn" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/linkedin.png" width="32" height="32" alt="LinkedIn" data-v-11d4c0a4></a> <a href="https://telegram.me/share/url?url=https%3A%2F%2Fdevhubby.com%2Fthread%2Fhow-to-proportionally-resize-image-in-css" rel="nofollow noopener" target="_blank" title="Telegram" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/telegram.png" width="32" height="32" alt="Telegram" data-v-11d4c0a4></a> <a href="https://api.whatsapp.com/send?text=https%3A%2F%2Fdevhubby.com%2Fthread%2Fhow-to-proportionally-resize-image-in-css" rel="nofollow noopener" target="_blank" title="Whatsapp" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/whatsapp.png" width="32" height="32" alt="Whatsapp" data-v-11d4c0a4></a> <!----></div></div></div> <div class="row py-0" data-v-3262fcae data-v-3262fcae><div class="text-center col" data-v-3262fcae data-v-3262fcae></div></div></div></div> <!----> <!----></div></div> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <h4 class="my-4 pl-4 text-capitalize"> 2 answers </h4> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <div tabindex="-1" role="listitem" class="v-list-item theme--light"><div class="v-list-item__icon best-answer"><span class="v-tooltip v-tooltip--bottom"><!----><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light success--text" style="font-size:40px;"></i></span></div> <div class="row post-row" data-v-145a8bfc data-v-145a8bfc><!----> <!----> <!----> <!----> <!----> <div class="col-sm-3 col-md-2 col-lg-1 col-12" data-v-145a8bfc data-v-145a8bfc><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-145a8bfc><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="suzanne" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Member</p> <div><a href="/profile/suzanne" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> suzanne </p></a></div> <!----></div></div> <div class="col-sm-9 col-md-10 col-lg-11 col-12" data-v-145a8bfc data-v-145a8bfc><div class="pt-0 col col-12" data-v-145a8bfc data-v-145a8bfc><span class="caption" data-v-145a8bfc>by <a href="/profile/suzanne" class="d-inline-flex caption" data-v-145a8bfc> suzanne </a></span>, <span class="caption" data-v-145a8bfc>3 years ago</span></div> <div class="forum-text ql-viewer" data-v-145a8bfc><p><span class="mention"><span><span class="mention"><span><span><span class="ql-mention-denotation-char">@</span>sofia.thiel</span></span></span> </span></span> You can resizing images is using the CSS <strong>width</strong> and <strong>height</strong> properties. Set the <strong>width</strong> property to a percentage value and the <strong>height</strong> to "<strong>auto</strong>". </p><p><br/></p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="color:#75715e"><!DOCTYPE html></span><<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">"en"</span>> <<span style="color:#f92672">head</span>> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"UTF-8"</span> /> <<span style="color:#f92672">style</span>> <span style="color:#f92672">img</span> { <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>; <span style="color:#66d9ef">height</span>: <span style="color:#66d9ef">auto</span>; } </<span style="color:#f92672">style</span>> </<span style="color:#f92672">head</span>> <<span style="color:#f92672">body</span>> <<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image/11.jpeg"</span> /> </<span style="color:#f92672">body</span>></<span style="color:#f92672">html</span>></pre></td></tr></tbody></table></div></div></div> <!----> <div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-145a8bfc data-v-145a8bfc><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-145a8bfc><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF6B00;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="1 like" class="like-dislike-buttons__count" data-v-0348114a>1</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="no dislikes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">1</span></span></span></div></div> <!----> <div class="col col-12" data-v-145a8bfc data-v-145a8bfc><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light" data-v-145a8bfc></div></div></div><div tabindex="-1" role="listitem" class="v-list-item theme--light"><!----> <div class="row post-row" data-v-145a8bfc data-v-145a8bfc><div class="py-0 col col-12" data-v-145a8bfc data-v-145a8bfc><div data-v-145a8bfc><!----></div></div> <!----> <!----> <!----> <!----> <div class="col-sm-3 col-md-2 col-lg-1 col-12" data-v-145a8bfc data-v-145a8bfc><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-145a8bfc><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="vaughn" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Member</p> <div><a href="/profile/vaughn" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> vaughn </p></a></div> <!----></div></div> <div class="col-sm-9 col-md-10 col-lg-11 col-12" data-v-145a8bfc data-v-145a8bfc><div class="pt-0 col col-12" data-v-145a8bfc data-v-145a8bfc><span class="caption" data-v-145a8bfc>by <a href="/profile/vaughn" class="d-inline-flex caption" data-v-145a8bfc> vaughn </a></span>, <span class="caption" data-v-145a8bfc>3 years ago</span></div> <div class="forum-text ql-viewer" data-v-145a8bfc><p><span class="mention"><span><span><span class="mention"><span><span><span class="ql-mention-denotation-char">@</span>sofia.thiel</span></span></span> </span> </span></span></p><p>To proportionally resize an image in CSS, you can set the <code>max-width</code> or <code>max-height</code> property to a percentage value. This will make the image scale down proportionally to fit within the container element.</p><p><br/></p><p>For example, let's say you have an image with a width of 1000px and a height of 500px, and you want it to be no wider than its container element:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="color:#f92672"><</span><span style="color:#a6e22e">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"image.jpg"</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"responsive-image"</span><span style="color:#f92672">></span> <span style="color:#f92672"><</span><span style="color:#a6e22e">style</span><span style="color:#f92672">></span>.<span style="color:#a6e22e">responsive</span><span style="color:#f92672">-</span><span style="color:#a6e22e">image</span> { <span style="color:#a6e22e">max</span><span style="color:#f92672">-</span><span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">100</span><span style="color:#f92672">%</span>; <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">auto</span>;}<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/style></span></pre></td></tr></tbody></table></div><p><br/></p><p>In this example, we set the <code>max-width</code> property to 100% and the <code>height</code> property to auto. This tells the browser to keep the original aspect ratio of the image while scaling it down to fit within the container.</p><p><br/></p><p>You can also set the <code>max-height</code> property instead of <code>max-width</code> if you want the image to be no taller than its container.</p><p></p></div></div> <!----> <div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-145a8bfc data-v-145a8bfc><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-145a8bfc><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF6B00;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="no likes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="no dislikes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">0</span></span></span></div></div> <!----> <div class="col col-12" data-v-145a8bfc data-v-145a8bfc><!----></div></div></div> <!----></div></div></div></div> <div class="d-flex justify-space-between flex-wrap flex-lg-nowrap flex-md-nowrap flex-xl-nowrap flex-sm-nowrap"><nav role="navigation" aria-label="Pagination Navigation" class="w-100"><ul class="v-pagination theme--light"><li><button type="button" aria-label="Previous page" class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-left theme--light"></i></button></li><li><button type="button" aria-current="true" aria-label="Current Page, Page 1" class="v-pagination__item v-pagination__item--active primary">1</button></li><li><button type="button" aria-label="Next page" class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-right theme--light"></i></button></li></ul></nav> <div class="mx-auto col-sm-2 col-md-3 col-lg-2 col-xl-1 col-6"><div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"><div class="v-input__control"><div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-397283014" class="v-input__slot"><div class="v-select__slot"><label for="input-397283014" class="v-label v-label--active theme--light" style="left:0px;right:auto;position:absolute;">Rows per page</label><div class="v-select__selections"><div class="v-select__selection v-select__selection--comma">15</div><input id="input-397283014" readonly="readonly" type="text" aria-readonly="false" autocomplete="off"></div><div class="v-input__append-inner"><div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light"></i></div></div><input type="hidden" value="15"></div><div class="v-menu"><!----></div></div><div class="v-text-field__details"><div class="v-messages theme--light"><div class="v-messages__wrapper"></div></div></div></div></div></div></div> <div class="row mt-2"><div class="col col-12"><h2 class="display-1">Related Threads:</h2></div> <div class="col col-12"><div class="mx-auto v-card v-sheet theme--light"><div role="list" class="v-list v-sheet theme--light v-list--two-line"><!----> <a href="/thread/how-to-resize-image-in-tailwind-css" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to resize image in Tailwind css?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/golang-implement-resize-image" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">Golang implement resize image</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/how-to-resize-svg-with-css" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to resize svg with CSS?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/how-to-resize-image-on-codeigniter" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to resize image on codeigniter?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/how-to-resize-an-image-in-swiftui" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to resize an image in SwiftUI?</div></div></a></div></div></div></div></div></div></div></div> <div pages="" class="footer" data-v-600bef70><!----> <footer class="v-footer footer mt-4 v-sheet theme--light" data-v-600bef70><div class="flex xs12 sm12 md6 lg4" data-v-600bef70><h4 class="title text-center" data-v-600bef70> Follow us </h4> <div class="social-section" data-v-600bef70><ul class="text-center pr-6" data-v-600bef70><li data-v-600bef70><a href="https://www.facebook.com/groups/devhubby" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-tw waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate blue--text text--darken-4 mdi mdi-facebook theme--light" style="font-size:36px;" data-v-600bef70></i></a></li> <li data-v-600bef70><a href="https://twitter.com/devhubbycom" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-tw waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate blue--text text--lighten-2 mdi mdi-twitter theme--light" style="font-size:36px;" data-v-600bef70></i></a></li> <!----> <li data-v-600bef70><a href="https://devhubby.tumblr.com/" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-youtube waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate red--text text--accent-4 mdi mdi-youtube theme--light" style="font-size:36px;" data-v-600bef70></i></a></li> <li data-v-600bef70><a href="https://www.linkedin.com/groups/14086432/" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-linkedin waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate blue--text text--darken-3 mdi mdi-linkedin theme--light" style="font-size:36px;" data-v-600bef70></i></a></li> <li data-v-600bef70><a href="https://www.instagram.com/dev_hubby/" rel="nofollow" target="_blank" class="transparent--text btn-floating btn-instagram waves-effect waves-light" data-v-600bef70><i aria-hidden="true" class="v-icon notranslate red--text text--darken-3 mdi mdi-instagram theme--light" style="font-size:36px;" data-v-600bef70></i></a></li></ul></div></div> <!----> <div class="flex xs12 sm12 md6 lg4" data-v-600bef70><div class="about-section white-text mx-auto" data-v-600bef70><h4 class="title text-center" data-v-600bef70>About us</h4> <ul class="text-center pr-6" data-v-600bef70><li data-v-600bef70><a href="/contact" rel="nofollow" data-v-600bef70>Contact us</a></li></ul></div></div> <div class="flex xs12 text-center mt-2" data-v-600bef70><span data-v-600bef70>© 2025 Copyright: devhubby.com </span> <p class="mb-0" data-v-600bef70> This Site is Created By <a href="https://mywebforum.com" target="_blank" data-v-600bef70>mywebforum.com</a></p> <p data-v-600bef70> Get Your Own <a href="https://mywebforum.com" target="_blank" data-v-600bef70>Questions & Answers platform</a></p></div></footer> <!----> <!----></div> <!----> <div class="js-scripts"></div></div></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY){return {layout:$,data:[{sanitizedMessage:h,thread:{id:65077,name:h,message:"\u003Cp\u003EHow to proportionally resize image in css?\u003C\u002Fp\u003E",formatted_message:c,image:"thread\u002F2022\u002F71eb8cd8-27eb-4527-ad03-6d7602209e79.png",tags:["mywebforum"],category:{id:aa,name:N,messages:d,threads:d,meta_title:c,meta_description:c,children:O,icon:c,is_public:a,order:d,description:N,slug:"html-css"},category_id:aa,slug:P,best_answer_id:ab,likes:52,dislikes:d,is_closed:a,is_pinned:a,is_moderated:b,username:"sofia.thiel",user_active:e,role:f,user_avatar:"avatar\u002Fsofia.thiel\u002Favatar-548-s.jpg",created:"2022-05-19T18:33:15Z"},relatedThreads:[{id:77128,title:ac,text:ac,avatar:"avatar\u002Fgreta.bartoletti\u002F37-2 (3).jpg",role:f,slug:"how-to-resize-image-in-tailwind-css",username:"greta.bartoletti",created:"2022-08-13T13:04:38Z"},{id:88670,title:ad,text:ad,avatar:"avatar\u002FOpenDev\u002F36a6f2edaa65733b2a74.jpg",role:f,slug:"golang-implement-resize-image",username:"OpenDev",created:"2022-12-10T07:41:47Z"},{id:65968,title:ae,text:ae,avatar:"avatar\u002Fjarod\u002F867924126.jpg",role:f,slug:"how-to-resize-svg-with-css",username:"jarod",created:"2022-05-24T22:32:45Z"},{id:184030,title:af,text:af,avatar:"avatar\u002Fjennifer\u002F574748907.jpg",role:f,slug:"how-to-resize-image-on-codeigniter",username:"jennifer",created:"2024-05-16T19:53:13Z"},{id:91465,title:ag,text:ag,avatar:"avatar\u002Fdandre.keeling\u002F861499836.jpg",role:f,slug:"how-to-resize-an-image-in-swiftui",username:"dandre.keeling",created:"2022-12-28T20:07:48Z"}],socialSettings:{id:1876,size:d,facebook:b,vk:a,ok:a,linkedin:b,telegram:b,whatsapp:b,pocket:a,twitter:b,active:b},page:e,totals:e,postsTotal:2,posts:[{id:ab,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Esofia.thiel\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E You can resizing images is using the CSS \u003Cstrong\u003Ewidth\u003C\u002Fstrong\u003E and \u003Cstrong\u003Eheight\u003C\u002Fstrong\u003E properties. Set the \u003Cstrong\u003Ewidth\u003C\u002Fstrong\u003E property to a percentage value and the \u003Cstrong\u003Eheight\u003C\u002Fstrong\u003E to "\u003Cstrong\u003Eauto\u003C\u002Fstrong\u003E". \u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-iyh2yfxa5n\" language=\"html\"\u003E<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" \u002F>\n <style>\n img {\n width: 50%;\n height: auto;\n }\n <\u002Fstyle>\n <\u002Fhead>\n <body>\n <img src="image\u002F11.jpeg" \u002F>\n <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fpre\u003E",formatted_message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Esofia.thiel\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E You can resizing images is using the CSS \u003Cstrong\u003Ewidth\u003C\u002Fstrong\u003E and \u003Cstrong\u003Eheight\u003C\u002Fstrong\u003E properties. Set the \u003Cstrong\u003Ewidth\u003C\u002Fstrong\u003E property to a percentage value and the \u003Cstrong\u003Eheight\u003C\u002Fstrong\u003E to "\u003Cstrong\u003Eauto\u003C\u002Fstrong\u003E". \u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 8\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 9\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E10\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E11\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E12\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E13\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E14\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E15\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"color:#75715e\"\u003E<!DOCTYPE html>\u003C\u002Fspan\u003E\n<\u003Cspan style=\"color:#f92672\"\u003Ehtml\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003Elang\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E=\u003C\u002Fspan\u003E\u003Cspan style=\"color:#e6db74\"\u003E"en"\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Ehead\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Emeta\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003Echarset\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E=\u003C\u002Fspan\u003E\u003Cspan style=\"color:#e6db74\"\u003E"UTF-8"\u003C\u002Fspan\u003E \u002F>\n <\u003Cspan style=\"color:#f92672\"\u003Estyle\u003C\u002Fspan\u003E>\n \u003Cspan style=\"color:#f92672\"\u003Eimg\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#66d9ef\"\u003Ewidth\u003C\u002Fspan\u003E: \u003Cspan style=\"color:#ae81ff\"\u003E50\u003C\u002Fspan\u003E\u003Cspan style=\"color:#66d9ef\"\u003E%\u003C\u002Fspan\u003E;\n \u003Cspan style=\"color:#66d9ef\"\u003Eheight\u003C\u002Fspan\u003E: \u003Cspan style=\"color:#66d9ef\"\u003Eauto\u003C\u002Fspan\u003E;\n }\n <\u002F\u003Cspan style=\"color:#f92672\"\u003Estyle\u003C\u002Fspan\u003E>\n <\u002F\u003Cspan style=\"color:#f92672\"\u003Ehead\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Ebody\u003C\u002Fspan\u003E>\n <\u003Cspan style=\"color:#f92672\"\u003Eimg\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003Esrc\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E=\u003C\u002Fspan\u003E\u003Cspan style=\"color:#e6db74\"\u003E"image\u002F11.jpeg"\u003C\u002Fspan\u003E \u002F>\n <\u002F\u003Cspan style=\"color:#f92672\"\u003Ebody\u003C\u002Fspan\u003E>\n<\u002F\u003Cspan style=\"color:#f92672\"\u003Ehtml\u003C\u002Fspan\u003E>\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n",is_moderated:b,likes:e,dislikes:d,thread_title:h,thread_slug:P,username:"suzanne",user_avatar:"avatar\u002Fsuzanne\u002F68-2 (1).jpg",user_active:e,role:f,role_logo:c,created:"2022-05-19T18:36:18Z"},{id:142559,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Esofia.thiel\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003ETo proportionally resize an image in CSS, you can set the \u003Ccode\u003Emax-width\u003C\u002Fcode\u003E or \u003Ccode\u003Emax-height\u003C\u002Fcode\u003E property to a percentage value. This will make the image scale down proportionally to fit within the container element.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EFor example, let's say you have an image with a width of 1000px and a height of 500px, and you want it to be no wider than its container element:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-4f0blkk\" language=\"javascript\"\u003E<img src="image.jpg" class="responsive-image">\n\n<style>\n.responsive-image {\n max-width: 100%;\n height: auto;\n}\n<\u002Fstyle>\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EIn this example, we set the \u003Ccode\u003Emax-width\u003C\u002Fcode\u003E property to 100% and the \u003Ccode\u003Eheight\u003C\u002Fcode\u003E property to auto. This tells the browser to keep the original aspect ratio of the image while scaling it down to fit within the container.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EYou can also set the \u003Ccode\u003Emax-height\u003C\u002Fcode\u003E property instead of \u003Ccode\u003Emax-width\u003C\u002Fcode\u003E if you want the image to be no taller than its container.\u003C\u002Fp\u003E\u003Cp\u003E\n\u003C\u002Fp\u003E",formatted_message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Esofia.thiel\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003ETo proportionally resize an image in CSS, you can set the \u003Ccode\u003Emax-width\u003C\u002Fcode\u003E or \u003Ccode\u003Emax-height\u003C\u002Fcode\u003E property to a percentage value. This will make the image scale down proportionally to fit within the container element.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EFor example, let's say you have an image with a width of 1000px and a height of 500px, and you want it to be no wider than its container element:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E8\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"color:#f92672\"\u003E<\u003C\u002Fspan\u003E\u003Cspan style=\"color:#a6e22e\"\u003Eimg\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003Esrc\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E=\u003C\u002Fspan\u003E\u003Cspan style=\"color:#e6db74\"\u003E"image.jpg"\u003C\u002Fspan\u003E \u003Cspan style=\"color:#66d9ef\"\u003Eclass\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E=\u003C\u002Fspan\u003E\u003Cspan style=\"color:#e6db74\"\u003E"responsive-image"\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E>\u003C\u002Fspan\u003E\n\n\u003Cspan style=\"color:#f92672\"\u003E<\u003C\u002Fspan\u003E\u003Cspan style=\"color:#a6e22e\"\u003Estyle\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E>\u003C\u002Fspan\u003E\n.\u003Cspan style=\"color:#a6e22e\"\u003Eresponsive\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E-\u003C\u002Fspan\u003E\u003Cspan style=\"color:#a6e22e\"\u003Eimage\u003C\u002Fspan\u003E {\n \u003Cspan style=\"color:#a6e22e\"\u003Emax\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E-\u003C\u002Fspan\u003E\u003Cspan style=\"color:#a6e22e\"\u003Ewidth\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E \u003Cspan style=\"color:#ae81ff\"\u003E100\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E%\u003C\u002Fspan\u003E;\n \u003Cspan style=\"color:#a6e22e\"\u003Eheight\u003C\u002Fspan\u003E\u003Cspan style=\"color:#f92672\"\u003E:\u003C\u002Fspan\u003E \u003Cspan style=\"color:#a6e22e\"\u003Eauto\u003C\u002Fspan\u003E;\n}\n\u003Cspan style=\"color:#f92672\"\u003E<\u003C\u002Fspan\u003E\u003Cspan style=\"color:#960050;background-color:#1e0010\"\u003E\u002Fstyle>\u003C\u002Fspan\u003E\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EIn this example, we set the \u003Ccode\u003Emax-width\u003C\u002Fcode\u003E property to 100% and the \u003Ccode\u003Eheight\u003C\u002Fcode\u003E property to auto. This tells the browser to keep the original aspect ratio of the image while scaling it down to fit within the container.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EYou can also set the \u003Ccode\u003Emax-height\u003C\u002Fcode\u003E property instead of \u003Ccode\u003Emax-width\u003C\u002Fcode\u003E if you want the image to be no taller than its container.\u003C\u002Fp\u003E\u003Cp\u003E\n\u003C\u002Fp\u003E",is_moderated:b,likes:d,dislikes:d,thread_title:h,thread_slug:P,username:"vaughn",user_avatar:"avatar\u002Fvaughn\u002F601477090.jpg",user_active:e,role:f,role_logo:c,created:"2023-03-13T02:14:05Z"}]}],fetch:{},error:O,state:{loading:d,settings:{id:8542,name:i,domain:"devhubby.com",port:80,plan:e,plan_name:"free",footer_code:"\u003C!-- Global site tag (gtag.js) - Google Analytics --\u003E\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-5LBS05BL1D\"\u003E\u003C\u002Fscript\u003E\n\u003Cscript\u003E\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n\n gtag('config', 'G-5LBS05BL1D');\n\u003C\u002Fscript\u003E\n\n\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E",robots_txt:"User-agent: *\nDisallow: \u002Fsearch\nDisallow: \u002Fadmin\nDisallow: \u002Fprofile\nDisallow: \u002Flogin\nDisallow: \u002Fregister\n\nSitemap: https:\u002F\u002Fdevhubby.com\u002Fsitemap.xml",locale:"en",add_source:d,allow_likes:e,add_watermark:e,add_watermark_position:3,hash:"c64c6733-bfad-4db8-b387-18207476d4d5",default_role:ah,allow_hash_tags:e,add_source_text:c,scrollable_pagination:d,meta_title:i,blog_active:a,favicon_png:"\u002Ffavicon.png",favicon_ico:c,custom_css:".amzn-native-container {\n margin: 0 auto;\n}\n \n.forum-text.ql-viewer div{\n border-radius: 5px;\n}",meta_description:i,description:i,logo:"logo\u002Fdev.png",is_related_thread:e,related_thread:ai,notify_on_moderation:b,activation:"email",facebook:"https:\u002F\u002Fwww.facebook.com\u002Fgroups\u002Fdevhubby",linkedin:"https:\u002F\u002Fwww.linkedin.com\u002Fgroups\u002F14086432\u002F",twitter:"https:\u002F\u002Ftwitter.com\u002Fdevhubbycom",youtube:"https:\u002F\u002Fdevhubby.tumblr.com\u002F",instagram:"https:\u002F\u002Fwww.instagram.com\u002Fdev_hubby\u002F"},layout:{id:8650,is_dark:d,name:$,background_full:a,code_theme:"monokai",page_transition:"fade",background:c,background_color:c,text_color:c,text_font_family:"Roboto",primary_color:Q,secondary_color:s,accent_color:s,info_color:s,success_color:s,error_color:Q,warning_color:Q},social_providers:{google:b,facebook:a,github:b},menus:[],showAd:a,darkMode:a,isFooterVisible:a,cdnUrl:"https:\u002F\u002Fforum-static.fra1.cdn.digitaloceanspaces.com",metaOg:{title:h,url:"https:\u002F\u002Fdevhubby.com\u002Fthread\u002Fhow-to-proportionally-resize-image-in-css",type:c,image:"https:\u002F\u002Fforum-static.fra1.cdn.digitaloceanspaces.com\u002Fimages\u002Fc64c6733-bfad-4db8-b387-18207476d4d5\u002Fthread\u002F2022\u002F71eb8cd8-27eb-4527-ad03-6d7602209e79.png",description:h,site_name:i},itemsPerPage:15,ad:[{id:23,name:"Own domain footer",css_selector:c,position:e,one_time:a,show_every:d,code:"\u003Cdiv id=\"amazon-banner-container\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript src=\"https:\u002F\u002Fcdn.flashpost.app\u002Fflashpost-banner\u002Famazon-banner.js\"\u003E\u003C\u002Fscript\u003E\n\u003Cscript\u003E\n if (window.AmazonBannerWidget) {\n \u002F\u002F Example with a custom page URL (or remove the second argument to default to current page)\n window.AmazonBannerWidget(\"amazon-banner-container\");\n } else {\n console.error(\"AmazonBannerWidget is not defined. Ensure the script is loaded correctly.\");\n }\n\u003C\u002Fscript\u003E",active:b,free:b},{id:541,name:"left under menu",css_selector:c,position:11,one_time:a,show_every:d,code:"\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E\n\u003C!-- devhubby --\u003E\n\u003Cins class=\"adsbygoogle\"\n style=\"display:block\"\n data-ad-client=\"ca-pub-4833888168110763\"\n data-ad-slot=\"2818766036\"\n data-ad-format=\"auto\"\n data-full-width-responsive=\"true\"\u003E\u003C\u002Fins\u003E\n\u003Cscript\u003E\n (adsbygoogle = window.adsbygoogle || []).push({});\n\u003C\u002Fscript\u003E",active:b,free:a},{id:542,name:"in list",css_selector:c,position:7,one_time:b,show_every:ai,code:"\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E\n\u003Cdiv style=\"max-width:750px; margin:0 auto\"\u003E\n\u003Cins class=\"adsbygoogle\"\n style=\"display:block\"\n data-ad-format=\"fluid\"\n data-ad-layout-key=\"-ed+6k-30-ac+ty\"\n data-ad-client=\"ca-pub-4833888168110763\"\n data-ad-slot=\"3505177655\"\u003E\u003C\u002Fins\u003E\n\u003C\u002Fdiv\u003E\n\u003Cscript\u003E\n (adsbygoogle = window.adsbygoogle || []).push({});\n\u003C\u002Fscript\u003E",active:b,free:a},{id:555,name:"post",css_selector:c,position:8,one_time:b,show_every:e,code:"\u003Cdiv class=\"d-flex\" style=\"height:450px; position: relative;\"\u003E\n\u003Cdiv id=\"amazon-banner-container-2\" style=\"position:absolute; width: 100%;\"\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E\n\u003Cscript src=\"https:\u002F\u002Fcdn.flashpost.app\u002Fflashpost-banner\u002Famazon-banner.js\"\u003E\u003C\u002Fscript\u003E\n\u003Cscript\u003E\n if (window.AmazonBannerWidget) {\n \u002F\u002F Example with a custom page URL (or remove the second argument to default to current page)\n window.AmazonBannerWidget(\"amazon-banner-container-2\");\n } else {\n console.error(\"AmazonBannerWidget is not defined. Ensure the script is loaded correctly.\");\n }\n\u003C\u002Fscript\u003E",active:b,free:a}],profileStats:{fetched:a,personalMessages:d},stats:{fetched:a,threads:d,posts:d},breadcrumbs:[{text:R,disabled:a,href:S},{text:N,disabled:a,href:"\u002Fforum\u002Fhtml-css"},{text:h,disabled:b}],categories:[],categoriesWithChildren:[],roles:[{code:ah,logo:c,name:f},{code:"ROLE_MODERATOR",logo:c,name:aj},{code:"ROLE_ADMIN",logo:c,name:"Administrator"}],i18n:{routeParams:{}},auth:{user:O,loggedIn:a,strategy:"local"}},serverRendered:b,routePath:"\u002Fthread\u002Fhow-to-proportionally-resize-image-in-css",config:{_app:{basePath:S,assetsPath:S,cdnURL:"https:\u002F\u002Fpub-1e27250373774d6ca37239bbf5810b5c.r2.dev\u002Fassets\u002F0.3\u002F"}},__i18n:{langs:{en:{common:{common_badge_blog:"blog",common_badge_post:"forum",common_badge_page:"page",answers:"no answers | 1 answer | {count} answers",likes:"no likes | 1 like | {count} likes",dislikes:"no dislikes | 1 dislike | {count} dislikes",show_more:ak,show_less:"Show Less",go_back:"Go Back",go_home_page:"Go Home Page",max_tag_reached:"Max Count of Tags Reached",in_category:"in category: ",our_privacy:"See our Privacy Policy",count_best_answers:al,search_ask_question:"Do you want to create a thread?",check_internet_connection:"You are offline! Check your internet connection.",by:"by",cookie_text:"This site uses cookies to ensure you get the best experience. By clicking \"Got it\" or continuing to browse the website, you are agreeing to our use of cookies.",got_it:"Got it",signature:am,author_marked_as_best:an,no_transition:"No Transition",mail_services:"Mail Services",free_files:"The current plan has a limit 10 files",user_not_active:"Deleted user",confirm_email_text:"We just sent an email to you with the confirmation code. Please put the confirmation code in field below.",main_top_ad:"Ad in all pages on the top",main_bottom_ad:"Ad in all pages on the bottom",blog_in_category_ad:"Ad in blog category",blog_post_top_ad:"Ad in blog post on the top",blog_post_bottom_ad:"Ad in blog post on the bottom",blog_in_post_ad:"Ad in blog post",forum_in_thread_ad:"Ad in forum thread",forum_in_post_ad:"Ad in forum post",sliding_ad:"Sliding Ad on all pages",page_ad:"Ad on the page",sidebar_under_menu:"Left sidebar under menu",site_is_not_ready:"You site is not ready yet",thanks_choosing_us:"Thank you for giving us the opportunity to serve you",register_site_first:"You need register your site first at",create_forum:"create a forum",create_forum_free:"free forum",create_forum_free_text:ao,create_qa_free_text:ao,create_qa_free:"Questions & Answers platform",support_text:"support forum",post_subject:ap,how_to_create_text:"If you have any question about our platform - you can easily ask us. We are always ready to help you by contact form or by our",subcategory:"Subcategories",category:aq,main_page:"Main Page",banned:"Banned User",no_banned:"Not Banned User",new_message:"New",not_read:"Not Read",spam:"Spam",trusted:ar,no_trusted:"Common User",security_questions:"Registration Questions",nice_to_see_you:"Nice to see you again",records_not_found:"No records found",not_found:"There were no results for your search.",member_from:"Member from",last_seen:"Last seen",not_authorized:"Sign in to your account",account:"Account",last_message:" Last Reply ",from:" from ",thanks_confirming:"Thank you for using our service. Account successfully confirmed!",thanks_confirming_details:"You can use your credentials to login into system",mail_settings_valid:"Congratulations! Mail Settings verified successfully and ready to use",terms:"Terms & Conditions",privacy:as,accept_terms:"I Agree to the Terms and Conditions",need_accept_terms:"You must agree to the Terms and Conditions in order to register",copyright_text:"This Site is Created By",security_messages:"Secure messages",na:"N\u002FA",active:at,no_active:"Inactive",attention:"Attention!",count_topics:au,need_moderation:"Approve message",no_data:"No data",no_files:"No files",no_records:"No records",no_messages:"No messages",count_messages:t,menu:j,search:u,action:"Action",pin_topic:"Pin topic",unpin_topic:"Unpin topic",existing_client:"Existing user? Sign In",close_topic:"Close topic",open_topic:"Open topic",rows_per_page:"Rows per page",top_menu:"Top menu",bottom_menu:"Bottom menu",waiting_approval:"Waiting approval",second:"Second",minute:"Minute",hour:"Hour",message:t,messages:t,topic_closed:"Topic closed",important_topic:"Important topic",threads:av},animation:{default_fade:"Default Fade",fade_up:"Fade Up",fade_right:"Fade Right",fade_down:"Fade Down",fade_left:"Fade Left",rotate:"Rotate",rotate_down_left:"Rotate Down Left",rotate_down_right:"Rotate Down Right",rotate_up_left:"Rotate Up Left",rotate_up_right:"Rotate Up Right",slide_down:"Slide Down",slide_left:"Slide Left",slide_right:"Slide Right",slide_up:"Slide Up",flip:"Flip",flip_x:"Flip X",flip_y:"Flip Y",zoom:"Zoom",zoom_down:"Zoom Down",zoom_left:"Zoom Left",zoom_right:"Zoom Right",zoom_up:"Zoom Up",light_speed:"Light Speed",bounce:"Bounce",bounce_down:"Bounce Down",bounce_left:"Bounce Left",bounce_right:"Bounce Right",bounce_up:"Bounce Up"},tabs:{delete_forum:k,translation_settings:aw,inbox_pm:"Inbox",sent_pm:"Sent",moderator_main:"Statistic",moderator_threads:ax,role_settings:v,hash_tags_settings:l,moderator_users:w,export_settings:m,moderator_posts:x,blog_settings:y,privacy_settings:z,badge_settings:A,ad_settings:B,file_settings:n,my_profile_stat:"My Statistics",main_settings:"General Settings",mail_settings:C,layout_settings:D,forum_settings:"Categories",member_settings:ay,social_providers:E,page_settings:F,menu_settings:"Menu Settings",social_settings:G,security_settings:H,profile:az,messages:t,redirect_settings:T,topics:au},modals:{delete_forum:"I understand that the forum and all data will be permanently removed.",delete_tag:"Are you sure you want to delete this hash tag?",delete_tag_confirm:"Please confirm that you want to delete this hash tag",delete_badge:"Are you sure you want to delete this badge?",delete_badge_confirm:"Please confirm that you want to delete this badge",new_pm:"Compose Message",delete_role:"Are you sure you want to delete this role?",delete_role_confirm:"Please confirm that you want to delete this role",delete_user:"Are you sure you want to delete this user?",delete_file:"Are you sure you want to delete this file?",delete_file_confirm:"Please confirm that you want to delete this file",delete_user_confirm:"Please confirm that you want to delete this user",delete_thread:"Are you sure you want to delete this thread?",delete_thread_confirm:"Please confirm that you want to delete this thread",delete_ad:"Are you sure you want to delete this Ad?",delete_ad_confirm:"Please confirm that you want to delete this Ad",delete_blog_content:"Are you sure you want to delete this post?",delete_blog_content_confirm:"Please confirm that you want to delete this post",delete_blog_category:aA,delete_blog_category_confirm:"Please confirm that you want to delete this category and related subcategories, posts.",delete_redirect:"Are you sure you want to delete this redirect?",delete_redirect_confirm:"Please confirm that you want to delete this redirect link.",delete_category:aA,delete_category_confirm:"Please confirm that you want to delete this category and related subcategories, threads, posts.",delete_menu:"Are you sure you want to delete this menu link?",delete_menu_confirm:"Please confirm that you want to delete this menu link.",delete_page:"Are you sure you want to delete this page?",delete_page_confirm:"Please confirm that you want to delete this page.",delete_message:"Are you sure you want to delete this message?",delete_message_confirm:"Please confirm that you want to delete this message.",delete_topic:"Are you sure you want to delete this topic?",delete_topic_confirm:"Please confirm that you want to delete this topic and related posts.",delete_all_topic_message:"Are you sure you want to delete all messages?",delete_all_topic_message_confirm:"Please confirm that you want to delete all messages",delete_all_topic_text:"Are you sure you want to delete all topics?",delete_all_topic_text_confirm:"Please confirm that you want to delete all topics"},errors:{page_not_found:"Page not found",other_error:"Error happened"},toasts:{voted:"Your vote is counted",email_sent:"Confirmation Code Sent to Email",logout:"You successfully logged out",category_created:"Category successfully created!",category_updated:"Category successfully updated!",ad_created:"Ad successfully created!",ad_updated:"Ad successfully updated!",menu_created:"Menu link successfully created!",menu_updated:"Menu link successfully updated!",page_created:"Page successfully created!",page_updated:"Page successfully updated!",register_successfully:"You have successfully registered",confirm_email:"Please confirm your email address",posts_waiting_approval:"Posts waiting approval:",users_waiting_approval:"Users waiting approval:",threads_waiting_approval:"Threads waiting approval:",favicon_updated:"Favicon successfully updated",background_updated:"Background successfully updated",select_logo:"Please select logo",select_favicon:"Please select favicon",logo_updated:"Logo successfully updated",logo_deleted:"Logo successfully deleted",profile_updated:"Profile successfully updated",avatar_updated:"Avatar successfully updated",select_avatar:"Please select image file",select_background:"Please select background image file",auth_success:"Logged in successfully",settings_success:"Settings successfully updated",terms_success:"Terms successfully updated",message_send:"Message has been sent",created:U,updated:"Updated",password_changed:"Password changed successfully",record_created:U,deleted:"Deleted",success:"Success",error:"Error happened."},titles:{upgrade_pro:V,admin_delete:k,translation_settings:aB,hash_tag_settings:l,badge_settings:A,roles:v,search:u,social_providers:E,confirm_account:aC,how_to_create:"How To Create Your Own Free Forum",category_settings:aD,edit_member:W,export_settings:m,file_settings:n,blog_settings:y,ad_settings:B,blog_content:I,blog_category:o,blog:J,my_pm:p,view_pm:X,members:aE,redirects:T,menu:j,pages:F,layout_settings:D,social_settings:G,security_settings:H,terms_settings:z,mail_settings:C,admin_index:K,moderator_index:L,moderator_threads:aF,moderator_users:w,moderator_posts:x,change_password:q,view_profile:"user profile",my_profile:Y,register:aG,login:g,restore_password:r,contact_us:M},descriptions:{upgrade_pro:V,admin_delete:k,translation_settings:aB,hash_tag_settings:l,badge_settings:A,roles:v,social_providers:E,confirm_account:aC,how_to_create:"How To Create Your Own Free Forum. If you need a free modern forum - you can create it right now.",category_settings:aD,export_settings:m,edit_member:W,moderator_index:L,file_settings:n,moderator_threads:aF,moderator_users:w,moderator_posts:x,ad_settings:B,blog_settings:y,my_pm:p,view_pm:X,blog:J,blog_category:o,blog_content:I,members:aE,redirects:T,menu:j,terms_settings:z,layout_settings:D,pages:F,social_settings:G,security_settings:H,admin_index:K,mail_settings:C,change_password:q,view_profile:"user profile. Contacts, messages, topics.",my_profile:Y,register:aG,login:g,restore_password:r,contact_us:"You can always send us message and we always ready to help. "},mail:{other:"Other",gmail:"Gmail",yandex:"Yandex",yahoo:"Yahoo",mail:"Mail.ru",rambler:"Rambler",bing:"Bing",outlook:"Outlook",aol:"AOL"},activations:{email:"Email confirmation required",manually:"Manually by admin\u002Fmoderator",automatically:"Automatically, after registration"},toc:{disabled:"No Active",top:"Top",bottom:"Bottom"},export:{yes:"Yes",no:"No",blog_category:o,blog:"Blog Posts",forum:"Forum",profile:"Profiles"},watermark:{center:"Center",top_left:"Top-Left Corner",top_right:"Top-Right Corner",bottom_left:"Bottom-Left Corner",bottom_right:"Bottom-Right Corner"},conditions:{threads:av,posts:"Posts",best_answers:al},forms:{default_role:"Default role for new users",hash_tag:"Hash Tag",hash_tags:"Tags (not required)",meta_title:"Meta Title",meta_description:"Meta Description",value:"Value",condition:"Condition",allow_hash_tags:"Enable Hash Tags",access_pm:p,create_post:"Create Post",edit_own_post:"Edit Own Post",edit_any_post:"Edit Any Post",moderate_data:"Moderate Posts\u002FThreads etc...",access_to_admin_tool:"Access to Admin Tool",register_limit:"Registration limit",permissions:"Permissions",created:U,scrollable_pagination:"Scrollable pagination",is_public_category:"Access to everyone",roles:"Only roles have access",add_source:"Add Source Whenever Copy Text?",allow_likes:"Allow to user likes posts and threads?",add_watermark:"Add Watermark to Images?",add_watermark_position:"Watermark Position",messages_before_auto_approved:"How many posts approve manually for the new users?",add_source_text:"Text:",move_to_category:"Move Threads and Messages to Category",blog_move_to_category:"Move Content to Category",default_add_source_text:"Read more at:",category:"Category:",code_theme:"Code Editor Theme:",user_link_type:"Type:",user_link:"Link:",is_profile_public:"Make Profile Public:",add_social_link:"Add Social Link",confirm_your_email:"Confirm your email",background_full:"Full Screen Image",notifications:"Notifications",to_username:"To",page_transition:"Page Transition",subject:"Subject",signature:am,no_ad:"No Ad in this post",max_length:"Max XX characters",custom_css:"Custom CSS",security_question_question:aH,is_related_post:"Enable Related Posts",related_post:"Count of Related Posts",is_related_thread:"Enable Related Threads",related_thread:"Count of Related Threads",from_name:"From:",to_name:"To:",role:aI,created_date:"Created at",status:"Status",export_data:"export data",export_data_deleted:"Unfortunately export deleted because we store it just in 3 days. If you need fresh data please create a new request.",export_data_deleted_short:"Unfortunately export deleted",export_settings:"Export Settings",security_question_answer:"Answer","messages_before_au to_approved":"How many approved messages for new clients",mark_uncertain_messages:"Moderate manually uncertain messages",thread_limit:"Thread limit",directory_name:"Directory name",nofollow:"Add for links rel=nofollow",blog_social_sizes:"Icon Size",notify_on_moderation:"Notify me about messages\u002Fthreads on moderation",directory:"Directory",summary:"Summary",badge_name:"Badge Name",badge_description:aJ,badge_icon:"Icon",banned:"Banned",robots_txt:"Robots.txt",toc:ap,one_time:"Show one time",show_every:"Show every",show_after:"Show after",css_selector:"CSS selector",code:"Code",file:"File",question:aH,answer:"You answer",thread_limit_type:"Thread limit by",register_limit_type:"Register limit",trusted:ar,edit_profile:aK,post_limit:"Post limit",post_limit_type:"Post limit by",category_name:"Category name",category_description:"Category Description",blog_category:aq,text_font_family:"Font Family",add_in_menu:"Add In Menu",avatar:"Avatar",template:"Template",old_url:"Old URL",new_url:"New URL",image:aL,is_dark:"Dark Mode",logo:"Logo",topic_name:aM,open_new_tab:"Open in new tab",no_index:"Noindex page by google, bing, yahoo etc...",text_link:"Link text",select_page:"Select page",select_manually:"Manually",parent_category:"Parent Category",link:"Link",name:Z,encryption:"Encryption",host:"Host",port:"Port",user:aN,page:"Page",position:"Position",type_background:"Background",no_background:"None",background_color:"Color",background_image:aL,activation:"Activate new members",password:"Password",new_password:"New password",confirm_password:"Confirm password",username:aN,firstname:"First name",favicon:"Favicon",favicon_png:"Favicon PNG",forum_name:Z,active:at,page_name:Z,forum_description:aJ,footer_code:"Footer custom code (ex. google analytics code)",lastname:"Last name",update:aO,email:"Email",company:"Company",message:"Message",text:"Text"},social_size:{small:"Small",medium:"Medium",large:"Large"},buttons:{upgrade_pro:V,delete_forum:k,buy_now:"Get Started",make_default_role:"Set role as the default for new users",edit_hash_tag:"Edit Hash Tag",new_hash_tag:"Add Hash Tag",new_badge:"Add Badge",edit_badge:"Edit Badge",add_role:aP,edit_role_link:"Edit Role",add_role_link:aP,login_google:g,login_facebook:g,login_github:g,cancel:"Cancel",delete_and_keep_messages:"Delete (keep messages\u002Fthreads)",login_google_tooltip:"Login with Google",login_facebook_tooltip:"Login with Facebook",login_github_tooltip:"Login with Github",moderate:aj,best_answer:an,answer:aQ,my_profile:az,ask_question:"Ask Question",add_redirect:"New Redirect",edit_redirect:"Edit Redirect",search_more:"Search More",resend_code:"Resend Code",confirm_email:"Confirm Email",show_more:ak,add_ad:aR,edit_ad:"Edit Ad",new_ad:aR,new_file:"New File",deactivate:"Deactivate",activate:"Activate",unbanned:"Unbanned",bann:aS,new_pm:"Compose",spam:"Mark As Spam",blog_social_share:"Social Share Buttons",new_export:aT,export_data:aT,new_directory:"New Directory",upload_file:"Upload File",upload_directory:"Create folder",edit_category:aU,edit_thread:"Edit Thread",add_category:aV,add_menu_link:aW,blog_category:o,blog_content:I,edit_menu_link:"Edit link",new_menu:aW,validate_mail_settings:"Validate",new_page:"New Page",read:"Read More",new_blog_category:aV,edit_blog_category:aU,new_blog_content:"New Post",edit_blog_content:"Edit Post",edit_page:"Edit Page",upload_avatar:"Upload avatar",upload_logo:"Upload Logo",delete_logo:"Remove Logo",upload_favicon:"Upload Favicon",upload_favicon_png:"Upload Favicon PNG",topic_name:aM,contact_us:M,home:R,upload_background:"Upload background image",ban:aS,unban:"Unban",delete_all_topic:"Delete all topics",delete_all_messages:"Delete all messages",admin:"Admin Dashboard",profile:aX,signin:"Sign In",register:_,change_password:q,role:aI,logout:"Logout",reply:"Reply to this topic",reply_pm:aQ,edit_post:"Edit post",new_post:"Add message",save:"Save",edit:"Edit",new_message:"New message",restore_password:r,remove:"Remove",login:g,close:"Close",add:"Add",update:aO,delete:"Delete",reset:"Reset Color Schema",send:"Send",clear:"Clear"},headers:{admin_hash_tags:l,admin_badges:A,roles:v,search:u,related_post:"Related Posts",related_thread:"Related Threads",edit_profile:aK,admin_members:"Users",export_settings:m,select_export:"Please select export settings",posts_on_moderation:"Posts on moderation",threads_on_moderation:"Threads on moderation",users_on_moderation:"Users on moderation",moderator_home:L,my_pm:p,moderator_index:"Statistics",admin_home:K,blog:J,change_password:q,admin_redirects:"List of Redirect",admin_ad:"List of Ads",file_settings:n,view_profile:"User profile",color_settings:"Theme Color Settings",primary_color:"Primary Color",secondary_color:"Secondary Color",accent_color:"Accent Color",info_color:"Info Color",success_color:"Success Color",error_color:"Error Color",warning_color:"Warning Color",my_profile:Y,register:_,menu:j,follow_us:"Follow us",about_us:"About us",login:g,restore_password:r,contact_us:M},breadcrumbs:{pro:"PRO status",admin_delete:k,translation:aw,privacy:as,hash_tag_settings:l,badge_settings:"Badge",menu_home:j,social_providers:E,search:u,export_settings:m,confirm_account:"Account confirmation",blog_home:J,pm:p,view_pm:X,blog_content:I,blog_settings:y,ad_settings:B,file_settings:n,privacy_settings:z,forum_settings:"Category Settings",mail_settings:C,layout_settings:D,redirects:"Redirects",blog_categories:o,edit_member:W,members:ay,pages:F,social_settings:G,security_settings:H,admin_index:K,moderator_threads:ax,moderator_posts:x,moderator_users:w,moderator_index:L,change_password:q,home:R,view_profile:"User Profile",my_profile:aX,login:g,register:_,contact_us:M,restore_password:r},plan:{success:"Payment Successful!",success_detail:"Your payment was successfully processed. Thank you for your purchase!",failed:"Payment Failed",failed_detail:"We're sorry, but your payment could not be processed.",failed_detail_line_2:"Please check your payment details and try again.",free:"Free",free_price:"$0\u002Fmo",free_description:"Great for starters",pro:"Pro",pro_price:"$9.99\u002Fmo",pro_description:"Most popular",enterprise:aY,enterprise_price:aY,custom_price:"Custom",feature:{unlimited_posts:"Unlimited Posts",unlimited_threads:"Unlimited Threads",unlimited_category:"Unlimited Category",unlimited_users:"Unlimited Users",ssl:"Free SSL",use_own_domain:"Use your own domain",spam_protection:"Spam Protection",ad_free:"AD Free",no_copyright:"No Copyright in the Footer",dedicated_server:"Dedicated Server"}}}}}}}(false,true,"",0,1,"Member","Login","How to proportionally resize image in css?","Software Developer Questions and Answers","Menu","Delete Forum","Hash Tags","Export","File Settings","Blog Category","Personal Messages","Change password","Restore password","#0095FF","Messages","Search","Roles","Moderate Users","Moderate Posts","Blog Settings","Privacy Settings","Badges","Ad Settings","Mail Settings","Layout Settings","Social Logins","Pages","Social Settings","Security Settings","Blog Content","Blog","Admin dashboard","Moderator dashboard","Contact us","HTML\u002FCSS",null,"how-to-proportionally-resize-image-in-css","#FF6B00","Home","\u002F","Redirect","Created","Upgrade to PRO","Edit User Details","View Message","My Profile","Name","Sign Up","qa",34531,104910,"How to resize image in Tailwind css?","Golang implement resize image","How to resize svg with CSS?","How to resize image on codeigniter?","How to resize an image in SwiftUI?","ROLE_CLIENT",5,"Moderator","Show More","Best Answers","Signature","Best Answer","Get Your Own","Table of Contents","Category","Trusted User","Privacy Policy","Active","Topics","Threads","Translation","Moderate Threads","Members","Profile","Are you sure you want to delete this category?","Translation Settings","Your account was successfully confirmed","Forum Category Settings","List Users","Moderate Thread","Register for the forum","Question","Role","Description","Edit Profile","Image","Title","Username","Update","Add Role","Reply","New Ad","Ban","Export Data","Edit Category","New Category","Add a new menu link","My profile","Enterprise"));</script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/7b8ec9d.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/25edc65.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/863688a.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/cb42003.js" defer></script> </body></html> 
