andrei_1234567890
andrei_1234567890

Reputation: 123

Fit image using percents with css

I'm trying to fit an image using unknown sizes for window, for image or for parent div. I just want to use percents as size.

Here is my html:

<div>
    <img src="http://www.eastlines.ro/ro/wp-content/uploads/2014/11/Flag_map_of_Romania.svg_.png" />
</div>

Here is my css:

body, html{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
 }

div{
    max-width:70%;
    max-height:20%;
    border: dashed blue 4px;
    display:inline-block;
}

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

Here is my fiddle: https://jsfiddle.net/940fLtdb/

Can someone suggest a solution for this using only css and html ?

Without scroll. No body scroll, no div scroll. The image can be 1000x20 or 20x1000 px.

Upvotes: 0

Views: 64

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65806

Based on your requirement that you have a responsive image of an unknown size always fit into a parent container that must have a relative size of its own, this means that you essentially need the image to be set to a width/height that is a percentage size of a parent that is also set to a percentage width/height.

Before we get to the answer, let me explain why your current code doesn't work and to do that you should understand how responsive content normally works.

Typically, we work with content that we control and this means that we know how big, say an image really is. But, we may want that size to scale up or down depending on the viewport it's being displayed on. So, we'd write something like this in the CSS:

img {

   /* Using an absolute size is used for this would prevent the image
      from being responsive:

   width: 300px; 

      So instead, the width or height (no need to set both because the
      default value for width and height is auto, meaning if you set the
      width the height will automatically adjust to keep the aspect ratio
      and vice versa.
   */


   /* By setting the width to a relative value, it's size can change       
      relative to its parent element's size:         
   */
   width:75%; 

   /* But, if the parent element's width is much larger or much smaller
      than usual, we can "cap" how big or small the image will get by 
      specifying an absolute value to cap it at:
   */
   min-width:100px;
   max-width:500px;
}

Now, we get to the problem that you are having. As you saw above, in order for the width/height to work responsively, it must be a percentage of a fixed value. But, in your scenario you don't know what to set the min-width or max-width to because the container for the image is, itself, responsive.

The solution here is to find out what the height and width that you want to cap the image's size at as an absolute value.

To do this, we need JavaScript (for the calculation) that will determine what 20% of the document's height is and what 70% of the document's width is (the max-height and width of the image's parent element) in absolute units.

Once we have these absolute values, it is no longer necessary to say anything in CSS about the image. it will scale to 100% of its container:

var img; 

// As soon as the document is fully loaded:
window.addEventListener("load", function(){

    // Get a reference to the image element
    img = document.querySelector("div > img");
    
    // Run function that sets min-width and max-width for imgage:
    getSize();
});

// If user changes viewport size, image needs to be adjusted
window.addEventListener("resize", function(){
  getSize(); 
});

function getSize(){
    // Get actual width and height of window in pixels, which is same as 100% 
    img.style.maxWidth = (window.innerWidth * .7) + "px";    
    img.style.maxHeight = (window.innerHeight * .2) + "px";
}
body, html{
    height:100%;
    margin:0px;
    padding:0px;
 }

div{
    max-width:70%;
    max-height:20%;
    border: dashed blue 4px;
  
    /* If you realy do need to have the width of the div
       shrink to the width of its content, then do use the
       next line, but without it, the width stays at 70% of
       the parent */
    /*display:inline-block;*/
}
<div>
  <!-- This works for all images - -try uncommenting the first and comment the second -->
	<!-- <img src="http://thumbnail.image.rakuten.co.jp/@0_mall/auc-aspo/cabinet/ssk001/001/ssk-nfk22jh30-30.jpg" /> -->
  <img src="http://www.eastlines.ro/ro/wp-content/uploads/2014/11/Flag_map_of_Romania.svg_.png" />
</div>

Upvotes: 1

Kalpesh Singh
Kalpesh Singh

Reputation: 1717

It's pretty simple. You forgot to add height and width of div. max-width and max- height must be supported by height and width properties.

body, html{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
 }

div{
    max-width:70%;
    min-height:20%;
    border: dashed blue 4px;
    display:inline-block;
}

div img{
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
<div>
	<img src="http://www.eastlines.ro/ro/wp-content/uploads/2014/11/Flag_map_of_Romania.svg_.png" />
</div>

Upvotes: 1

Related Questions