CSS 100 width or height while keeping aspect ratio

Question

Currently  with STYLE  I can use width  100  and auto on the height  or vice versa   but I still can t constrain the image into a specific position  either being too wide or too tall  respectively   Any ideas

User · Answer

I think this is what your looking for  i was looking for it my self  but then i remembered it again befor i found the code   background-repeat  repeat-x  background-position  top  background-size auto  background-attachment  fixed    digital evolution is on its way

User · Answer

Use JQuery or so  as CSS is a general misconception  the countless questions and discussions here about simple design goals show that     It is not possible with CSS to do what you seem to wish  image shall have width of 100   but if this width results in a height that is too large  a max-height shall apply - and of course the correct proportions shall be preserved

User · Answer

Some years later  looking for the same requirement  I found a CSS option using background-size   It is supposed to work in modern browsers  IE9      lt div id  container  style  background-image url myimage png   gt   lt  div gt    And the style    container     width   100px    or 70   or what you want     height  200px    or 70   or what you want     background-size  cover    background-position  center    background-repeat  no-repeat      The reference  http   www w3schools com cssref css3 pr background-size asp  And the demo   http   www w3schools com cssref playit asp filename playcss background-size

User · Answer

If you only define one dimension on an image the image aspect ratio will always be preserved   Is the issue that the image is bigger taller than you prefer   You could put it inside a DIV that is set to the maximum height width that you want for the image  and then set overflow hidden  That would crop anything beyond what you want   If an image is 100  wide and height auto and you think it s too tall  that is specifically because the aspect ratio is preserved  You ll need to crop  or to change the aspect ratio   Please provide some more information about what you re specifically trying to accomplish and I ll try to help more   --- EDIT BASED ON FEEDBACK ---  Are you familiar with the max-width and max-height properties  You could always set those instead  If you don t set any minimum and you set a max height and width then your image will not be distorted  aspect ratio will be preserved  and it will not be any larger than whichever dimension is longest and hits its max

User · Answer

Not to jump into an old issue  but      container img         max-width 100         height auto  important      Even though this is not proper as you use the  important override on the height  if you re using a CMS like WordPress that sets the height and width for you  this works well

User · Answer

Simple elegant working solution   img     width  600px     width of parent container     height  350px    height of parent container     object-fit  contain    position  relative    top  50     transform  translateY -50

User · Answer

Its best to use auto on the dimension that should respect the aspect ratio  If you do not set the other property to auto  most browsers nowadays will assume that you want to respect the aspect ration  but not all of them  IE10 on windows phone 8 does not  for example   width  100   height  auto

User · Answer

Nowadays one can use vw and vh units  which represent 1  of the viewport s width and height respectively   https   css-tricks com fun-viewport-units   So  for example   img     max-width  100vw    max-height  100vh          will make the image as wide as tall as possible  maintaining aspect ratio  but without being wider or higher than 100  of the viewport

User · Answer

Simple solution   min-height  100   min-width  100   width  auto  height  auto  margin  0  padding  0    By the way  if you want to center it in a parent div container  you can add those css properties    position  absolute  top  50   left  50   transform  translate -50   -50      It should really work as expected

User · Answer

One of the answers includes the background-size  contain css statement which I like a lot because it is straightforward statement of what you want to do and the browser just does it   Unfortunately sooner or later you are going to need to apply a shadow which unfortunately will not play well with background image solutions   So let s say that you have a container which is responsive but it has well defined boundaries for min and max width and height    photo     max-width  150px    min-width  75px    max-height  150px    min-height  75px      And the container has an img which must be aware of the pixels of the height of the container in order to avoid getting a very high image which overflows or is cropped   The img should also define a max-width of 100  in order first to allow smaller widths to be rendered and secondly to be percentage based which makes it parametric    photo  gt  img     max-width  100     max-height  150px    -webkit-box-shadow  0 0 13px 3px rgba 0 0 0 1     -moz-box-shadow     0 0 13px 3px rgba 0 0 0 1     box-shadow          0 0 13px 3px rgba 0 0 0 1       Note that it has a nice shadow     Enjoy a live example at this fiddle  http   jsfiddle net pligor gx8qthqL 2

User · Answer

I use this for a rectangular container with height and width fixed  but with images of different sizes   img     max-width  95     max-height  15em    width  auto  important

User · Answer

This is a very straightforward solution that I came up with after following conca s link and looking at background size   It blows the image up and then fits it centered into the outer container w o scaling it    lt style gt   cropcontainer     width   100      height  100      background-size  140     background-position  center    background-repeat  no-repeat     lt  style gt    lt div id  cropcontainer  style  background-image  url yoururl     gt

User · Answer

By setting the CSS max-width property to 100   an image will fill the width of it s parenting element  but won   t render larger than it s actual size  thus preserving resolution    Setting the height property to auto maintains the aspect ratio of the image  using this technique allows static height to be overridden and enables the image to flex proportionally in all directions   img       max-width  100       height  auto

User · Answer

Had the same issue  The problem for me was that the height property was also already defined elsewhere  fixed it like this    img      max-width  100       max-height  100       height  inherit  important

[css] CSS: 100% width or height while keeping aspect ratio?

Examples related to css

Examples related to image

Examples related to height

Examples related to width