I have a img that resizes to the footer height (10vh) with max-height: 100%. In Dev tools the size of each element seems to be OK but somehow the page is overflowing and I can`t figure out where the extra px height comes from.
Here is my code:
* {
margin: 0 !important;
padding: 0 !important;
}
body {
background-color: yellow;
}
.header {
height: 10vh;
background-color: red;
}
.content {
height: 80vh;
background-color: green;
}
.footer {
height: 10vh;
background-color: blue;
}
img {
max-height: 100%;
max-width: 100%;
}
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
<img src="https://pixabay.com/static/uploads/photo/2016/01/19/18/00/city-1150026_960_720.jpg" alt="" />
</div>
Why does this happen and how can I avoid it?
UPDATE: I had no idea that the default display: inline of <img> was causing this. Now that I know it is much easier to find other answers to my question (I just didn`t know what to search for). For those who may be searching for this issue and find my question here is a complete answer: https://stackoverflow.com/a/31445364/6453726
SOLUTION: Add vertical-align: top to the <img>.
Add display:block; to your img selector
img {
max-height: 100%;
max-width: 100%;
display: block;
}
Related
I’m looking to implement a full height (no-scroll) layout which contains a square image.
Depending on the available height of the container the image should scale accordingly in width.
So far I’ve attempted to implement the layout using both — floats and flexbox — but any solution (including anything responded to similar questions here) either leads to an overlap between image/container and the additional content to the right or doesn’t calculate 100% as intended (e.g. by including the height of the header).
My most recent attempt looks like this:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
background: #D8D8D8;
}
.header {
background: #FF9C9C;
padding: 5px;
}
.content {
display: flex;
height: 100%;
}
.image-container {
border: 1px solid #7100FF;
height: 100%;
}
img {
display: block;
height: 100%;
width: auto;
}
.aside {
background: #B6F0C7;
flex: 1 1 auto;
}
<div class="page">
<div class="header">
Header
</div>
<div class="content">
<div class="image-container">
<img src="http://placehold.it/100x100" alt="Card image">
</div>
<div class="aside">
<p>Other content</p>
</div>
</div>
</div>
https://jsfiddle.net/s0846ozy/
It’s been a few years since I have worked with CSS. Looking forward to having a rather obvious flaw in my approach pointed out. Thanks!
EDIT:
It seems this issue is browser-specific. I’m using the latest Firefox.
object-fit won't solve the issue as far as I can tell and is something I’ve already explored.
I’ve added a JSFiddle for easier experimentation.
Chrome (expected):
Firefox (actual):
use this:
img {
object-fit: cover;
}
for preserving the aspect-ratio!!
I have this SVG which doesn't have a width or height attribute
I have the following HTML
<div class="block">
<img src="https://s3-eu....vAmfIxVv/kiwi.svg">
</div>
With the following css
.block {
display: inline-block;
width: auto;
}
img {
width: 100%;
}
Although I want the svg to be 100% in width, it renders in chrome with some weird width/height (Only in firefox it has a dimensions of 0x0)
JSFIDDLE
So any suggestions where this natural width comes from and why isn't the width 100% ?
Is it possible to make the svg width 100% ?
If you want auto width on the <svg> elements, you should simply use display: block on the parent <div>, but use max-width: 100% on the SVG elements themselves. Chrome somehow fails to enforce proper width calculations when SVGs are contained within an inline-block element:
.block {
display: block;
}
img {
max-width: 100%;
}
Proof-of-concept example:
section {
border: 2px solid green;
margin: 20px;
background-color: yellow;
width: 500px;
height: 500px;
}
.block {
display: block;
}
img {
max-width: 100%;
}
.svg {
border: 1px solid red;
}
<section>
<div class="block svg">
<img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/46194/456229/JCHA4rtvAmfIxVv/kiwi.svg" alt="">
</div>
<div class="block">
<img src="http://placeholder.pics/svg/100x200" alt="">
</div>
</section>
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
I have the following html:
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
It has the following css:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
}
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
}
The image's margins aren't being set but its padding is. Also, when I set the margin to a specific value, the margins work. When I use the element inspector in Google Chrome, that line in the styles window doesn't have a line through it so I'm assuming it's valid css. I just can't figure out why it won't get set to auto.
You need to set the image to display:block;
demo http://jsfiddle.net/mCen7/
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
display: block;
}
I would appreciate you give us your actual objective.
As far as I understand, you simply want the img to be centered in your div.
img tags are inline tags, that is, share the behavior of a text or a letter. It's not a block, such as a div.
inline tags are horizontally centered like text, with a text-align: center style, as follows:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
text-align: center;
}
#image {
width: 300px;
height: 450px;
padding-top: 20px;
}
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
What I am looking to achieve is all the three below
pushing the footer to the bottom of the page
also making the main div stay full sized all the time with the child divs
all the child div's remain same height
I tried so many ways to do it and I found a way. But what ever I have done is not compatible with Firefox, Safari and IE7 and below, Please help me, I am looking for something that works on all browsers and Pure CSS.
Thanks a lot friends.
html:
<body>
<div id="parent">
<div id="row">
<div id="childRight">content</div>
<div id="childLeft"></div>
</div>
</div>
<div id="footer">footer content</div>
CSS:
<style>
#parent{
height: auto !important;
min-height: 100%;
width: 400px;
background: grey;
overflow: auto;
display: table;
}
#footer{
height: 60px;
width: 400px;
background: yellow;
margin-top: -60px;
}
html, body{
height: 100%;
margin: 0;
}
#childRight, #childLeft{
display: table-cell;
width: 100px;
border: 1px solid black;
min-height: 100%;
}
#childRight{
background: green;
height: 100px;
}
#childLeft{
background: red;
height: 200px;
}
#row{
display: table-row;
background: blue;
}
</style>
JSfiddle example:
http://jsfiddle.net/yellowandred/UBUNJ/2/
I appreciate your help and suggestions friends. thanks in advance..
Change height of the left and right side div should be same...ex:200px.
and use fixed bottom property for footer.