MENU


Sizing

[min-|max-]{height|width} (the content box does not include the margin, border and padding)
:80px: sets the dimension to be 80px.
:90%: sets the dimension to be 90% of the maximum available length.
:auto: sets the dimension automatically
:max-content
:min-content
:fit-content


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   p,div{    
      background:lawngreen;
   }
   p:last-of-type{    
      width:fit-content;
   }
   div{    
      width:fit-content;    
      text-align: center;
   }
</style></head><body>
   <p>Whiteboards are remarkable.</p>   
   <p>Whiteboards are remarkable.</p>   
   <div>       
      <table>           
         <tr><td>Fantastic!</td><td>Awesome!</td></tr>           
         <tr><td>Superb!</td><td>Cool!</td></tr>       
      </table>    
   </div>
</body></html>

{max|min}{-block-size | -inline-size}
: 150px: sets the limit of the width or height of the block depending on the value of the 'writing-mode' property.
: max-content
: min-content
: fit-content

box-sizing (with 'height', 'width')
:content-box: applies the width and height to the content box (excluding the padding and border).
:border-box: applies the width and height to the border box (including the padding and border).

object-fit (defined for a replaced element such as <img>, <video>, <audio>, <iframe>, <embed>, <object>, <canvas>, <object> and <option>.)
: none: does not resize the replaced content.
: contain: resizes the content proportionately to fit within the box perfectly.
: cover: resizes the content proportionately to fill the entire box completely, possibly clipping away part of the content.
: fill: stretches the content to fill the entire box completely, without trying to maintain the aspect ratio; the default value for <img>.
: scale-down: 'none' or 'contain', whichever would result in a smaller size.

resize (with non-'visible' 'overflow' property)
(useful property for making iframe resizable.)
:none: cannot be resized.
:both: both the width and height can be resized.
:horizontal: the width can be resized.
:vertical: the height can be resized.

This shows three different ways to fit an image perfectly at the center of a box, regardless of whether its orientation is portrait or landscape, while maintaining the aspect ratio. Using an <img> element allows the visitor to save the image directly by right-clicking on the image. Also notice the triangular marks at the bottom right corners of the <div>s, indicating they can be resized by dragging on them.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
div, body>img{    
   width:300px;    
   height:300px;    
   background: palevioletred;    
   overflow: auto;    
   resize: both;
}
div>img{   
   height: 999vh;   
   max-height: 100%;   
   max-width: 100%;       
   display: block;   
   margin: auto auto;   
   object-fit: contain;
}
div:last-child{    
   background:url('/shared/slim_lady3.jpg') palevioletred;    
   background-size: contain;    
   background-position: center center;    
   background-repeat: no-repeat;
}
</style></head><body>   
   <img style="object-fit:contain" src="/shared/slim_lady1.jpg"/>   
   <div><img src="/shared/slim_lady2.jpg"/></div><br/>   
   <div></div>
</body></html>

contain (indicates an element is independent of the rest of the document for performance benefits)
:none: applies no containment.
:size: can be sized without examining descendants' sizes.
:layout: nothing outside the element may affect the internal layout and vice versa.
:style: effects don't escape the containing element.
:paint: the descendants don't display outside its bounds.
:strict: = size layout paint
:content: = layout paint