I want to fit a png image to the height of a div that is inheriting its height from another div. I have seen how this can be done by setting the image's max-height to 100% (in questions such as this: How do I auto-resize an image to fit a div container), but this only works for me when the image is directly in the div thats height is specified in pixels.
I have a topbar, whose height I set explicitly, and a logodiv inside that, which inherits the height from the topbar. However, the logo does not resize to fit the height of logodiv unless I explicitly set the height (the commented code).
It seems like bad coding to have to set the height twice, when it should be inherited. Is there any way to fit the image to the correct height without doing this?
css:
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
html:
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
I want to fit a png image to the height of a div that is inheriting
its height from another div.
Technically, logodiv is not inheriting its height from topbar. Its simply expanding itself according to its content(the image in this case).
Try adding the property height:inherit; to second div and you are good to go.
HTML
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
CSS
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
height:inherit;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
Fiddle
Try this css:
#topbar {
width:100%;
height:45px;
border:1px solid red;/* for highlighting*/
}
#logodiv {
float:left;
height:inherit;
}
/*To clear float */
#topbar:after {
clear:both;
display:block;
content:""
}
#logodiv img {
max-height:100%;
}
Demo : http://jsfiddle.net/lotusgodkk/4d4L1g0a/
Related
I have a div with a height of 300px. I want to have one or more child images that scale according to this height.
It works great when I use an img with the #src CSS below. Width and height are not defined as pixel resolutions so it scales as it should if I changed the height of #wrap.
Is it possible to do the same with CSS backgrounds (no Javascript) without defining a pixel width/height? I can set a width of 100% and place a max-width in there but that restricts the image to the max-width, and if the image is smaller than the max-width, there will be a gap to the right (which can be very large depending on the value of max-width).
Thanks!
#wrap
{
width:100%;
height:300px;
}
#src
{
display:inline-block;
width:auto;
height:100%;
border:1px #0f0 solid;
}
#bg
{
display:inline-block;
background-image:url(https://i.imgur.com/6672G7J.png);
background-repeat:no-repeat;
background-size:contain;
width:auto;
height:100%;
border:1px #f00 solid;
}
<div id="wrap">
<img id="src" src="https://i.imgur.com/6672G7J.png" />
<div id="bg"></div>
</div>
If I understand you correctly... you can use background-size: cover; and then the image will fill the entire parent container without needing to specify a width or height
Are you looking for background-size: cover to have the largest dimension applied instead of the smaller?
The trick is to set the div's height to 0 and then set the padding-top to a ratio of the height/width. See https://stackoverflow.com/a/22211990/40161
#bg
{
display:inline-block;
background-image:url(https://i.imgur.com/6672G7J.png);
background-repeat:no-repeat;
background-size:contain;
width:100%;
height:0;
padding-top: 100%; (Height/Width)
border:1px #f00 solid;
}
Note: I changed width to 100%. This will make it take up all available room. But if you want it 100px as your original example, you'd need a wrapper around the div to constrain the size. See https://jsfiddle.net/1x6p33f9/1/
I'm tearing my hair apart here. Does anyone know how i can get a div to fill the screen both horizontal and vertical? I can make it fill it horizontal but it just refuses to fill vertical unless a specify the width in pixels. What am I doing wrong?
This is what I want to accomplish, without have to scroll to get the bottom-padding:
Thank you!
HTML:
<div id="main">
<div class="main_content"></div>
</div>
CSS:
#main {
margin-left:auto;
margin-right:auto;
height:100%;
width:auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
}
.main_content {
width:auto;
height:100%;
background:#fff;
}
When you set a percentage height it is related to its container, that must have an explicit height. If you set height: auto, the container will take the height of its content. The parent of the div must have an explicit height property, you can set in 'px' or in 'em'. You can also set in 'vh'
you can add height:100vh;
Demo : http://jsfiddle.net/6yLhk17h/
Add the below code in your style sheet.
html{
height: 100%;
}
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
I have a website where i am using height auto to set the height of a content div and min height 100% to make sure the content div always stretches the height of the page.
my HTML looks like this
<html>
<body>
<div id="holder">
<div id="outercontent">
<div id="innercontent">
content goes here
</div>
</div>
</div>
</body>
</html>
and my css rules are as follows
html,body {
height:100%;
color:white;
}
#holder {
background-color:transparent;
width:100%;
min-height:100%;
height:auto;
position:absolute;
z-index:1;
}
#outercontent {
min-height:100%;
height:auto;
width:940px;
margin-left:auto;
margin-right:auto;
background-color:transparent;
background-image:url(../images/bowsides.png);
background-repeat:no-repeat;
overflow:hidden;
}
#innercontent {
width:900px;
height:auto;
min-height:100%;
margin-left:auto;
margin-right:auto;
background-color:#ffefce;
overflow:hidden;
}
The holder div is an absolutely positioned DIV, i need this because i have a rotating background which puts each background image on a separate absolutely positioned div. so this div is placed on top of all of them using z-index.
outer content is a little wider than my inner content and this is used to give me space put border images (since css3 border images are not widely supported yet)
inner content is my main content area
min-height 100% works on the holder div (that is the outermost div of the group), but it does not work on outercontent or innercontent in any browser
why is this?
Can you try opening the source in IE by using deleveloper tools , I guess something is overriding the height , you will get the exact picture then
I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
The HTML looks as such
<div id='banner'>
<div class='slides_container'>
<div>
<a href='#'><img src='images/banner.png'></a>
</div>
<div>
<a href='#'><img src='images/banner2.png'></a>
</div>
</div>
</div>
And the CSS to match this is:
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
Any replies are extremely appreciated.
You should make sure the .slides_container div is centered within its parent, i.e.
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
If the parent is not width 100% of the page, the parent needs to have this property also:
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
Hope this helps.
Edit
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
.slides_control div {
width: 1280px;
text-align: center;
}
Add .slides_container img and margin:0 auto
#banner { width:100%; margin-bottom:50px; }
.slides_container {
width:100%;
height:500px;
}
.slides_container div, .slides_container img {
width:1100px;
height:500px;
text-align:center;
margin:0 auto; }
Normally they use margin:0 auto; to handle this. text-align won't do you good for div.