Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
Basically, I've got a div with width set to 100%, within which there is an img link. The img's width is set to auto with a height of 600px. The link area stretches over the width of the whole div, in this case the width of the whole page, rather than just the img.
<div class="feature">
<img src="feature.jpg" />
</div>
.feature {
width: 100%;
height: auto;
}
.feature a img {
width: auto;
height: 600px;
display: block;
margin: auto;
}
I don't want to change the div's width to a set value (which does work), because I want to be able to add images later on that may have different aspect ratios. Does anyone have a solution? thanks.
This shows the result if you set the width of the div manually: http://jsfiddle.net/L1xanprh/4/ I also tried just setting the div width to auto as well, it game the same problem as the width being 100%.
For that a, make it's display inline-table
avoid using width:auto.
give the exact position of the image where you want to appear the image.
and use exact width and the height of the original image.
if not your image will get stretched.
If not use the width and height values with accept ratio is equal with the accept ratio of the original image.
Then your image will not get stretched. But if your using a image with lower pixel rate your image will
blurred when your using higher width,height values than the original image.
Does background-image not work with percentage div sizes? The images only show up if I hardcode width and height in the .contrast class. Images don't show up if width and height are percentages. Any insight?
CSS:
.parent{
width=1000px;
}
img.contrast{
width:400px;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
HTML:
<div class="parent">
<img class="contrast"/>
<img class="contrast"/>
<img class="contrast"/>
</div>
JsFiddle
Edit1: So .contrast cannot inherit the size of the parent division? If I had 3 divisions within a parent division set to 25% width, it can't access the parent's width?
Unless you use it as SRC, the container has no way to know wich size is your background.
That been said, you can just use divs for that purpose, and play with the background-size, background-position properties to get the desired effect (i.e. make the background fit the div size). What you cannot do is to make the div "inherit" the size from its background property.
Take a look at this fiddle I made from yours: http://jsfiddle.net/amenadiel/x9a56/2/
img.contrast{
width:450px;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
img.contrast2{
width:50%;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
img.contrast3{
width:20em;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
You can have the divs (or imgs) take absolute widths, or widths relative to the parent, or widths relative to the window. That''s not a problem, because the container has a width from which you can relate. But it wou fail to provide a height for each one, they won't have any.
In turn, the container div expands to fit the total height of its children elements. But, as an alternative workaround, If you provide a fixed height for the container, then you can assign relative heights to the children img.
TL/DR
use img with src attribute to guess size from the image url, or pick your favorite workaround
I'm trying to get an image centered on the screen, and I want it to stretch horizontally.
The trick here is that I need set margins. Lets use 200px as an example.
The image needs to stretch horizontally (and possibly scale proportionally) to maintain those margins no matter the windows size.
I can center it, and I can stretch it, but I can't do both at once for some reason.
Also, this needs to be CSS only! No JS.
Any help is greatly appreciated! :D
P.S. I've seen ton of questions about scaling images with the window size, and this is not the same thing. I need set margins, in pixels, that stay constant, while the image between them stretches horizontally.
I put a container around my image which would preserve the margins. As the window's width changes, the margin stays intact - only the width of the .container is changed. By setting the width of the image within the container to equal 100%, the entire image would be scaled (proportionally) based on the width of the container:
CSS:
.container {
margin: 0 200px;
background: red;
}
.container img {
width: 100%;
}
HTML:
<div class="container">
<img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
You could use two divs, the outer with the set margins, the inner with width set to 100%:
http://jsfiddle.net/tqmrY/4/
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
One way you could do this is by putting your image in a div and then putting padding on the div.
You would set your img to have a width of 100% and auto height, and then put padding on the containing div.
Here is an example
http://jsfiddle.net/uJnmf/