Css: How to Set Image Size Relative to Parent Height

CSS: How can I set image size relative to parent height?

Original Answer:

If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.

Your need, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

And CSS:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/

Explanation

DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.

The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;

Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.

Magic moment:

transform: translate(-50%, -50%);

Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.

Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.

This is just a tricky way to figure out centroid of the image and the parent DIV and match them.

Apologies for taking too long to explain!

Resources to read more:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

CSS Image height restrict to parent div height. Parent div width and height are specified in percentages***

height: 100%;
width: auto;

Just define the image height as a percentage, auto width will keep it in proportion.

CSS How to make image size relative to parent?

To resize small images, putting them in small container and pushing that small container with another element is a clean solution. In my opinion tables are great for that.

Here is the code;

<div class="col col-span-1" style="position : relative">
  <div>
    <img style="max-width:800px; max-height:800px;width:100%; height:100%;" src="https://i.imgur.com/iY3x1GC.png">
  </div>
  <table style="position: absolute;top: 75%;width: 85%;">
    <tbody>
      <tr>
        <td style=" width: 60%;"></td>
        <td style=" max-width: 90px; width: 39%;">
          <div style="">
            <img src="https://i.imgur.com/C1uxk6Y.png" style="width:100%; height: 100%;">
          </div>
        </td>
      </tr>
    </tbody>
  </table>    
</div>

How to make a child height relative to its parent height-Css

JsFiddle

.child {
    padding: 40px 54px 54px;
    height: inherit;
    box-sizing: border-box;
}

Add height:inherit or height:100% and box-sizing:border-box in your .child class. Height inherit/100% will apply the parent height in your child div.

JsFiddle (Your Code)

JsFiddle (My Code)

I have set height:280px (for example) in .parent class. You can see the background color area of the child class. I hope this answer will solve your issues.

Why does an image adjust to the width of the parent, but not to the height?

As the comment from TylerH said, the solution is to define the height of the parent, not just the max-height.

How to strech parent element's height to containing image

You can get the image aspect ratio as a percentage by dividing the height by the width. Then use that as padding for the image parent to create the same aspect ratio shape on the parent, and it will naturally match the aspect ratio of the image.

* {  padding: 0;  margin: 0;  box-sizing: border-box;}
img, a {  text-decoration: none;  border: none;}
html, body {  width: 100%;  height: auto;  background-color: #565656;}
section {  position: relative;  width: 100%;  max-width: 1300px;  height: 100%;  margin: 0 auto;  padding: 1%;  background-color: #a1a4a8;}
.container {  position: relative;  height: 0;  padding-top: 56.29510826%;  position: relative;}
.level0 img {  position: absolute;  top: 0; left: 0;  width: 100%;}

<section>Gray: parent
    <div class="level0">        <div class="container">            <img src="https://image.ibb.co/kZtbMF/Screen_Shot_2017_03_03_at_3_32_11_PM.png" alt="image">        </div>    </div>
</section>