Reputation: 123
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
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
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