How to maintain image aspect ratio and make sure it fits inside the container?

Question

I have been struggling with this problem for a couple of weeks now. I have a container which is 90vh. I have some header text and below it is an image. I need to maintain the aspect ratio of 16:9. But, the height must never exceed the height of the container causing scrollbar to appear. Is it doable??

Here is the calculation for 16:9 aspect ratio

To get height base on width (9 * WIDTH) / 16;

To get width base on height (16 * HEIGHT) / 9

https://codesandbox.io/s/sleepy-sara-ew3oj9?file=/src/styles.css

Laaouatni Anas · Answer 1 · 2022-07-21T07:38:40.810

the .wrapper element never exceed the height of the container, because 90vh isn't working.

❌ the part which is wrong

height: "90vh"; /* turn this from string to number, without this "" */

✅ make it like this:

height: 90vh;

also for the aspect-ratio problem,

you can a native css solution, called aspect-ratio

img {
  aspect-ratio: 16/9;
  width: 100%;
}

with this solution, the image will be always 100%,
but the height change depends on aspect-ratio

.App {
  font-family: sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  padding: 1rem;
  margin: 1rem;
}

.content {
  display: grid;
  grid-template-columns: 80% 20%;
  margin-top: 2rem;
  gap: 1rem;
}

.wrapper {
  height: 90vh;
  /* turn this from string to number, without this "" */
  border: 1px solid;
  margin: 1rem;
}

.sidebar {
  border: 1px solid;
}

.content img {
  aspect-ratio: 16/9;
  width: 100%;
}

<div class="App">
  <div class="wrapper">
    <div class="container">
      <div class="header">
        <h1>Here is header</h1>
        <p>Here is sub header</p>
      </div>
      <div class="content">
        <img alt="Hello" src="https://images.unsplash.com/photo-1611771341253-dadb347165a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8YmVhdXRpZnVsJTIwbmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
        <div class="sidebar">Side bar</div>
      </div>
      <!-- content -->
    </div>
    <!-- container -->
  </div>
  <!-- wrapper -->
</div>
<!-- app -->

I am using canvas. And the image is inside canvas. So, we can't use css style for the image. Is there any other ways?? — Nyi Nyi Hmue Aung, Jul 21 '22 at 07:38
@NyiNyiHmueAung yes, you need javascript for that https://stackoverflow.com/a/29676404/17716837 (in the question you asked for an img tag, not canvas) — Laaouatni Anas, Jul 21 '22 at 07:44
here a useful documentation: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images — Laaouatni Anas, Jul 21 '22 at 07:46
or use this: "Resizing photo on a canvas without losing the aspect ratio" https://stackoverflow.com/a/6752580/17716837 — Laaouatni Anas, Jul 21 '22 at 07:48

score 0 · Answer 2 · answered Jul 21 '22 at 07:35

0

Set max-width on your image, to force it to take the size of the grid you defined. Also set a height 100% on your .container class

 img {
      max-width: 100%;
      max-height: 100%;
    }

answered Jul 21 '22 at 07:35

Benoit Cuvelier

806
7
23

How to maintain image aspect ratio and make sure it fits inside the container?

2 Answers2