Html Question posted in
Some basic documentation can be found here.

Html – Is it possible to respect the aspect ratio of a responsive image with an initial width and height

Let’s say that I have an HTML image with predefined, hard-coded and immutable width and height values:

<img src="img.png" style="width: 800px; height: 600px" />

And a CSS rule to make all images responsive:

img {
  max-width: 100%
}

The problem is that when the page is resized, the image’s aspect ratio is not preserved.

Is it possible to keep the aspect ratio, given that:

  • I can’t change the inline style for the image
  • But I can change the global CSS

Note: The solution has to be generic as width: 800px; height: 600px is just a sample and the ratio could be anything.

Tags:

5

Answers


  1. 0

    Try using aspect-ratio. Based on your sizing of 800px x 600px that’s a ratio of 4/3 so you’d use:

    img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
    Login or Signup to reply.
  2. 0

    Instead of using img use div with background-image property. Like this

    <div class="div-with-image"></div>

.div-with-image {
 width: 800px;
 height: 600px;
 background-image: url('img.jpg');
 background-size: cover; #or contain
}

    here is more info:
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images

    Login or Signup to reply.
  3. 0

    What you need is for the width and height to be relative to the same figure.
    For example:

    img {
      max-width: 100%;
      width: 100vw  !important;/*Define the size according to the ratio of the image*/
      height: 120vw  !important;
    }
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="https://pickture.co.il/wp-content/uploads/2023/05/%D7%A8%D7%A7%D7%A2-%D7%99%D7%A4%D7%94-%D7%9C%D7%94%D7%95%D7%A8%D7%93%D7%94-%D7%97%D7%99%D7%A0%D7%9D-32-768x768.jpg">
</body>
</html>

    In this example, the width and height will be relative to the width of the page.
    (the !important is to override the height and width defined in html)

    Login or Signup to reply.
  4. 0

    If the inline styles are actually the intrinsic width and height of the image then all you have to do is to reset the height to auto. You can keep the width as it is since you have max-width.

    img {
  max-width: 100%;
  height: auto!important
}
    <img src="https://picsum.photos/id/1/800/600" style="width: 800px; height: 600px" >
    Login or Signup to reply.
  5. 0

    To do that you need to put a width: 100%; and height: auto; in responsive with media query. But in you image tag, you need tu put height and width properties for the SEO.

    So, you to put the image size by default.

    Exemple :

    <img src="img.png" width="800" height="600" loading="lazy" alt="Image about..." />
   
<style>
@media screen and max-width (width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    } 
}
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search