Css: 100% Width or Height While Keeping Aspect Ratio

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

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.

Maintain aspect ratio while keeping 100% width of fluid container

Try this as a starting structure. The video container is full responsive 16:9 with and without the <video> tag. Let me know if it's not what you expected.

<div class="parentContainer">
  <header class="searchBar">
    <br>search<br><br>
  </header>
  <div class="rowContainer">
    <main class="videoContainer">
      <div class="video">
        video 16:9
        <!-- <video width="480" height="270" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video> -->
      </div>
      <div class="video-title">
        Title of the video
      </div>
    </main>
    <aside class="sidebarContainer">
      <br>Sidebar<br><br>
    </aside>
  </div>
  <footer class="bottomContainer">
    <br>bottom<br><br>
  </footer>
</div>

with css code width & height 100% (or 100vw & 100vh)

*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  font: 400 1rem/1.5 sans-serif;
}
header, main, aside, footer {
  display: block;
}
.parentContainer {
  height: 100%;
  overflow: hidden;
}
.rowContainer {
  display: flex;
}
.sidebarContainer {
  flex: 0 0 25%;
  width: 25%;
}
.videoContainer {
  flex: 0 0 75%;
  width: 75%;
}
.video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.video::before {
  display: block;
  content: "";
  padding-top: 56.25%; /* 9:16 */
}
.video video {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.parentContainer {background-color: lightgreen;}
.searchBar {background-color: yellow;}
.videoContainer {background-color: silver;}
.video-title {background-color: lightgrey;}
.sidebarContainer {background-color: pink;}

Maintain Aspect ratio for width @ 100%

Remove the height from the image and give your container height: auto;. Check the snippet.

div{  width: 1000px;  height: auto;  background: black;}
img {  width: 100%;}

<div>      <img  src="https://dummyimage.com/500x250/918c91/0011ff.jpg" /></div>

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Maintain aspect ratio according to width and height

The aspect-ratio property (2022)

To maintain the aspect ratio of a div according to width and height, you can use the aspect-ratio property (MDN reference).

This allows you to maintain any aspect ratio according to the viewport size or to the size of the parent element.

Maintaining aspect-ratio according to the viewport size (width and height) :

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}


/** For the demo **/

body {
  margin: 0;
}

<div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div>

Scale up image until either height or width is 100%

The object-fit property will do this if you set it to contain (if you set it to fill it will become distorted if the aspect ratio of the container and the img are not the same).

Here's a simple example, change the viewport dimensions to see the affect on the image:

.container {
  width: 50vw;
  height: 50vh;
  background: gray;
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <img src="https://picsum.photos/id/1015/768/1024"/>
</div>

Maintain div aspect ratio according to height

You can use an image that has the desired proportions as to help with proportional sizing (images can be scaled proportionally by setting one dimension to some value and other to auto). The image does not have to be visible, but it must occupy space.

.box {  position: absolute;  bottom: 0;  left: 0;  height: 50%;}.size-helper {  display: block;  width: auto;  height: 100%;}.inner {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background: rgba(255, 255, 153, .8);}

<div class="box">  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">  <div class="inner">    1. box has fluid height<br>    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>    2.1 it thus maintains width = 200% of height<br>    2.2 it defines the dimensions of the box<br>    3. inner expands as much as box  </div></div>

Css: 100% Width or Height While Keeping Aspect Ratio