Image max height and max width while preserving aspect ratio

0
votes

Is it possible to give max-height and max-width to an image while preserving aspect ratio without using js?

For example, I want an image to be with a height of 38px and the width auto. If the width is higher than 200px, I want the width to be 200px and the height auto.

If it's not possible without js, does anyone have an idea how to do it with js and without resizing the image after it's already loaded?

6
javascriptcssimageheightwidth

6 Answers

1
votes

You can nest the image in a 200x38 container, then set the max-width and max-height of the image to 100%. Here is a working snippet (I have included JS to make it interactive, but it is not necessary. Try resizing the container using the sliders):

var width = document.getElementById("width");
var height = document.getElementById("height");

var widthInput = document.getElementById("widthInput");
var heightInput = document.getElementById("heightInput");

var imageContainer = document.querySelector("div");

widthInput.addEventListener("input", function() {
  width.innerHTML = this.value + "px";
  imageContainer.style.width = this.value + "px";
});

heightInput.addEventListener("input", function() {
  height.innerHTML = this.value + "px";
  imageContainer.style.height = this.value + "px";
});
div {
  width:  200px;
  height: 200px;
  border: 1px dashed #000;
}

.image {
  display:    block;
  max-width:  100%;
  max-height: 100%;
  background: #333;
}
<div>
  <img class="image" src="https://via.placeholder.com/400"/>
</div>

<br/>

<label>Width: <span id="width">200px</span></label>
<br/>
<input id="widthInput" type="range" min="0" max="400"/>
<br/>
<label>Height: <span id="height">200px</span></label>
<br/>
<input id="heightInput" type="range" min="0" max="400"/>

You can notice that however you change the dimensions of the container, the image is still contained within it. By setting the container to 200px wide by 38px tall, you can force the image to stay within the limits 0px ≤ width ≤ 200px and 0px ≤ height ≤ 38px.

1
votes

There is a built in CSS style called max-width and max-height and I really do not think min-width exists, incase you are wondering. You can refer to the example below to understand better. Also I am using text instead of an image, but you should get the idea.

I have nested the actual div instead another div so you could play around with the resizing.

#con {
  resize: both;
  overflow: auto;
  
}

#box {
  /*Here you could say auto instead*/
  height: 200px;
  max-width: 200px;
}
<!DOCTYPE html />
<html>

<head></head>

<body>
  <div id="con">
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus auctor ipsum, in convallis mi lobortis in. Phasellus molestie suscipit rutrum. Duis et convallis lectus. Etiam id urna massa. Nulla sagittis erat nec arcu rutrum elementum. Vestibulum blandit erat vestibulum, ullamcorper augue vitae, accumsan mi. Sed consectetur, quam vel efficitur interdum, ante ligula interdum justo, a dictum ligula tortor sed nunc. Cras eget magna ac urna imperdiet laoreet eget sed ante. Vivamus condimentum tortor sit amet diam elementum malesuada sed sed neque. Vestibulum et magna mollis, consequat nibh ut, facilisis orci. Phasellus fermentum sodales libero, et vehicula enim ornare ut. Donec non bibendum metus. Cras hendrerit, quam a pellentesque varius, tortor nunc maximus lectus, at gravida diam ipsum ut metus. Etiam orci felis, dapibus id cursus eu, dapibus ut augue. Proin a leo viverra, tempus ipsum nec, lacinia lacus. Maecenas id dolor nec neque lobortis interdum quis quis nisi.</div>
  </div>
</body>

</html>
1
votes

Using both width auto and height auto will give to following code. To center horizontal I used the align-items center of the flexbox.

.container,
.container * {
  box-sizing: border-box;
}
.container {
  display: flex;
  width: 800px;
  margin: 10px auto;
}
.img {
  display: flex;
  align-items: center;
  width: 25%;
  height: 150px;
  border: 2px solid silver;
}
.img img {
  display: block;
  border: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: auto;
}
<div class="container">
  <div class="img">
    <img src="http://placekitten.com/200/300" alt="">
  </div>
  <div class="img">
    <img src="http://placekitten.com/300/200" alt="">
  </div>
  <div class="img">
    <img src="http://placekitten.com/250/350" alt="">
  </div>
  <div class="img">
    <img src="http://placekitten.com/350/200" alt="">
  </div>
</div>
1
votes

You have to use max-width and height and object-fit CSS properties for image.. see example

.img img {
  max-width: 200px; 
  height: 38px;
  object-fit: contain;
  object-position: left;
}
<div class="img"><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"></div>

Hope it works... if any question comment pls

1
votes

Here are 2 examples of the solution I think would work, the first image has less than width: 200px; and the second one has more than width: 200px;

Again, I'm not sure if it would work for you, but I think it would, and if it doesn't I would love to know why.

<style>
  img {
    max-width: 200px;
    height: auto;
  }
</style>

<img src="https://dummyimage.com/180x400/666/fff.jpg" alt="test">

<br>

<img src="https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="test 2">
0
votes

Specifying height or width will keep the aspect ratio. Specifying both the max-height and max-width will keep the aspect ratio. Specifying height and max-height makes no sense. Specifying height and max-width cannot guarantee your aspect ratio.