How to resize image automatically on browser width resize but keep same height

Question

I am trying to replicate the same effect that this website has  http   www knockknockfactory com    When the browser width is resized the image automatically gets smaller but the height of the area in which it occupies stays the same   When i try to replicate this  my image also gets smaller but the height changes   My code so far is     lt div id  image  gt  lt img src  cover png    gt  lt  div gt    CSS   body       margin  0      padding  0     img        max-width  100        height  auto       How do i get my image to decrease increase upon browser resize but still keep the same height using CSS like on that website

User · Answer

The website you linked doesn t changes the image s width but it actually cuts it off  For that it needs to be set as a background-image   For more info about background-image look it at http   www w3schools com cssref pr background-image asp  Usage    divID       background-image url image url       -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover

User · Answer

I ve used Perfect Full Page Background Image to accomplish this on a previous site   You can use background-size  cover  if you only need to support modern browsers

User · Answer

You should learn about the Media queries for CSS  The site you referring to is using the same  The site is basically using the different CSS everytime the browser window size is changining   Here s the link for samples   http   css-tricks com css-media-queries

User · Answer

changing the width of the image will automatically change the height     how many pictures do you want to have this functionality  If it s a lot and they all have DIFFERENT Heights you should probably just let the height change as well   Lets say you have 5 images that have height 400px   in your html give those five  tags the class of fixed   fixed   width  100   height  500px  important     This should let the width change but keep the height the same

User · Answer

It is an old question but i want to add that if you want to resize image according to viewport size only with css  you can use viewport units  vh  viewport height  or vw  viewport width      img   width  100vw  height  100vh      See browser supports

User · Answer

Since you are having trouble adjusting the height you might be able to use this  http   jsfiddle net uf9bx 1   img  width  100   height  100   max-height  300px      I m not sure exactly what size or location you are putting your images but maybe this will help

User · Answer

Make it a background image and larger than 100  to get the desired effect  http   jsfiddle net derekstory hVM9v   HTML   lt div id  image  gt  lt  div gt    CSS  body  html       height  100       width  100       margin  0      padding  0     image       width  100       height  500px      background   000 url  http   static ddmcdn com gif dog-9 jpg   center no-repeat      background-size  auto 200

[html] How to resize image automatically on browser width resize but keep same height?

Examples related to html

Examples related to css

Examples related to image

Examples related to resize