I have a container with a max-height defined in pixels, and then an IMG within with a max-height defined in percentage. In Chrome this works as expected, in other browsers the img simply extends beyond the container.
Anyone know which is the proper behavior, and why?
<figure>
<img src="http://images.autostash.com/parts/img/medium/wix/24056.jpg" alt="no picture">
</figure>
figure {
max-width: 90px;
max-height: 90px;
border: 1px solid red;
}
img {
max-height: 90%;
display: block;
margin: 0 auto;
}
http://jsfiddle.net/Dygerati/wWRJK/
According to the MDN description of the CSS height property,
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
As a result, since you have only max-height and min-height declared, and NOT height, the img height defaults to auto.
Try this.
figure {
max-width: 90px;
height: 90px;
border: 1px solid red;
}
Related
Currently I have the following rule
img{
height: 100%;
width:100%;
}
This works fine in most of the cases.
Is it possible to display the image at it actual size when -
image width < container width
Please note that image width is unknown.
UPDATE: CONTAINER WIDTH IS ALSO UNKNOWN.
There is. Set the max-width to 100% of the container so that when the container shrinks beyond the intrinsic (original) image size, the image also shrinks (as how it behaves in your current rule). This way, the image isn't forced to set its width to 100% of its container; it is allowed to maintain its intrinsic size (i.e. it only needs to shrink its size when the container is smaller than its intrinsic size because its width is limited to a maximum of 100% of the container).
.container {
width: 500px;
border: 1px solid black;
border-radius: 5px;
margin: 40px 0;
overflow: hidden;
}
img {
max-width: 100%;
}
.container-two {
width: 300px;
margin: 20px 0;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
* {
font-family: Helvetica;
}
<p>Image within container. Container is 500px wide, but image doesn't scale; it still maintains its intrinsic (original) width</p>
<div class="container">
<img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
</div>
<p>Image within container. Container is 300px wide (smaller than the original image width, which is 381px), but image still shrinks to fit inside the container while displaying fully</p>
<div class="container-two">
<img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
</div>
<p>Image not within container. Original image size (381px for the width)</p>
<img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
The object-fit and object-position property work for me. So my new rule with this property -
img{
height: auto;
width:100%;
object-fit: scale-down;
object-position: 0 0; /*top left position (optional)*/
}
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
Hey guys I'm trying to create a circle with bg color. But based on my style that I attached above is not working properly. It didn't take height. Can you please tell me why? Thanks :)
You need to declare a height for a parent element to be able to use %-size on the children.
like for example:
.parent{
height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}
Check this fiddle out:
https://jsfiddle.net/n1o8057L/1/
It is always recommended to mention height to the parent/grandparent before you use height:100% to a child element
Try this
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
body{
height:100vh;
position:relative;
}
<div class="circle"></div>
If you still don't want to mention height to the body element(parent) you can define them like this
Because by default the div elements' were block elements
Block elements always have 100% width but not a definite height
so define the max-width the actual size and set its width to 100% so that it won't escape the given width.
But when it comes to height divs don't have heights by default so here set height or min-height to your required value and add max-height:100% (optional)
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can)
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
.circle {
max-width: 150px;
width:100%;
max-height: 100%;
min-height:150px;
display: block;
background: #ff4040;
border-radius:100%;
}
<div class="circle"></div>
I have a section that i want to scale using aspect ratio, but also keep it at a maximum and minimum height. Somehow the max-height property doesn't apply to this, meanwhile the min-width works just fine.
div {
background: green;
border-bottom: 2px solid red;
padding-top: 60%;
max-height: 100vh;
min-height: 450px;
box-sizing: border-box;
}
<div></div>
What i'm trying to achieve is to display content that has a fixed aspect ratio, it scales down until reaches a minimum height, but also won't exceed the viewport height when displayed in a wider browser. See attached image for explanation:
Any ideas?
Ok, if I understand correctly, you'd need to do have the height of the box linked to the width at a percentage (which I'd do by setting the height to viewport width units rather than viewport height - in my example I've set it to 75%). That way the box stays in pro when it's not being constrained by max-height or min-height.
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-color: #00ff00;
}
.box {
width: 100%;
height: 75vw;
max-height: 100vh;
min-height: 400px;
background-color: #ff0000;
}
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.
There is fiddle http://jsfiddle.net/only_dimon/6fgyy/
There is css:
.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.news {
width: 190px;
margin-left: 15px;
border: solid 1px #ccc;
background: #ddd;
float: left;
box-sizing: border-box;
padding: 10px;
height: 100%;
}
.news:first-child {
margin-left: 0;
}
JQuery defines div's height without no problems. Why children div can't get 100% height of parent? Red that the height of div with auto height is non-set value. Why is that so?
In example, overflow:hidden make the div "row" to get the max height of childs. And it visualy changed width of itself.
Please, explain me.
Tnx in advance.
Read the specification of CSS height property.
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'. A percentage height on the root element is
relative to the initial containing block.
Note: For absolutely positioned elements whose containing block is based on a block-level
element, the percentage is calculated with respect to the height of
the padding box of that element. This is a change from CSS1, where the
percentage was always calculated with respect to the content box of
the parent element.
So you should either set the children's position to absolute (which will ignore the float setting and will need explicit horizontal positioning for each child) or specify the height of the container explicitly such as:
.row {
position: relative;
height: 400px;
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
}
Here is your updated fiddle.
Also, check out this approach about "Equal Height Columns".
Height inheritance needs to go all the way up the tree.
Try:
body, html { height:100% }
.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
height:100%;
position: relative;
}