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/
Related
somehow my image is not scaling down or up at all. I have seen many things on the internet but I could not solve it. W3schools told me to make it like this, with the formular-banner image.
.formular-banner
{
max-width: 100%;
height: auto;
}
<div class="formular-banner">
<img src="koala.jpeg">
</div>
First of all, you are defining settings for the parent element of the image, not for the image itself. So you can't expect that to have an effect on the image...
For the image itself, you also shouldn't use those settings, but instead of max-width: 100% (to make it the full width of the container), you should use width: 100%, plus a max-width that has the original width of the image in pixels, in order not to make it any bigger (i.e. distorted) than the original image in case it's smaller (i.e. less wide) than the container.
So your CSS rule would be
.formular-banner > img {
width: 100%;
max-width: 1240px; /* use the actual width of your image here */
height: auto;
}
If the image is smaller than the container (which, as a div = block element) will have 100% width by default) and you want it to be centered, you can add this rule (for the container) which will horizontally center the image (as an inline element) inside the container:
.formular-banner {
text-align: center;
}
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.
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.
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