How do we put a large image into a smaller div with h-align/v-align as centre. Image should not be visible outside of the div (kind of overflow:hidden). Also, div will change its size based on page size.
I took help from other question/answer and tried with div background and css - but it is aligning image to h-centre only.
jsFiddle - http://jsfiddle.net/yesprasoon/9tLcV/.
How to align both h-centre and v-centre? Also, there should not be any vertical scrollbar. It should work with any page size and (if possible) any image size. Possible with CSS only?
Not sure if your are OK with resizing the image but you could go with the background-size property
.imageContainer {
background-size:cover;
}
Here is my example: JSFIDDLE
Edit
After your comment I finally understood the problem. You can center the background-image vertically, that works, but but the vertical centering will not adapt when the height of the page changes dynamically. The reason is that your imageContainer div has a fixed height therefore its own height will not change with the page's height.
What you can do to remedy that is give your imageContainer a height of 100%. However you will also need to have the body/html to extend to 100% or your div will have no height in the absence of content, or be too short if you have little content.
JsFiddle doesn't deal well with body/html styles (maybe there's a trick I don't know) so I put my example on codepen.
HTML
<div class="imageContainer" style="background-image: url('http://www.taiwanholidays.com.au/util/image.jsp?l=791');"></div>
CSS
html,body {
width:100%;
height:100%;
margin:0
}
.imageContainer {
margin:0;
height:100%;
width:100%;
overflow:hidden;
background-position:center center;
background-repeat:no-repeat;
}
Related
I want to make my image fit into a div without using any javascript and without letting the image stretch. I am unable to use the background-image property as I am using css transitions. Using
max-height:100%;
max-width:100%;
Works and is exactly what I want to do except for the scenario when the image is too small. I have considered enlarging the image to a certain height while maintaining the width and then applying max-height and max-width but this seems like a very hacky, time expensive solution if it even works at all. Are there any other suggestions?
Thanks
Kabeer
Display the image as block and it will fit to the parent container
wrap the image in a container and set this style for the image in it:
img {
display: block;
max-width: 100%;
max-height: 100%;
}
so it won't strech
here you have a fiddle
This fiddle is with smaller image than the container
You can try the following way which the image will inherit the height and width of its parent div
<div class="img-frame">
<img src="http://placekitten.com/g/200/300"/>
</div>
CSS
.img-frame{
width: 500px;
height: 500px;
overflow: hidden;
}
a img{
width : 100%;
height: auto;
}
Working Fiddle
Ok, it seems that there is no better solution so I will have to use the hacky solution I eluded to in the original question. For future people this is how I did it. lets say the container is 400px. Apply this css to the image:
height:400px; //set it to whatever the container height is
width:auto;
max-width:100%;
max-height:100%;
With this solution it will scale the image to the size of the container. It will then check the newly scaled image and set the max height to 100% which will stay at 400px. It will then set the max width to 100% which for a portrait image will do nothing if the image is landscape it will then set the width to the width of the container and it works. Also to centre the image after use:
margin:auto;
I apologise for answering my own question but I thought it would be useful for future people
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
Is there any neat CSS-only way to make an absolutely positioned div element stretch to the bottom of the document (not just the browser's window)?
Essentially, the div element is the background of a modal popup, overlaying the rest of the application. It should cover the entire page - from top to bottom. However, when the content is larger than the browser window, height still only sizes the element to the window height (and the content flows out of the div).
#background{
background-color: green;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#content{
color: white;
height: 200%; /* simulate a lot of content - just put a large value in here */
}
Used like this:
<body>
<div id="background">
<p id="content">a</p>
</div>
</body>
For example, look at http://jsfiddle.net/TuNSy/ : The green background stretches to the visible portion of the parent element, but when you scroll down, you'll see that it doesn't actually stretch all the way to the bottom.
There are a couple of other questions, but they don't apply to my problem:
CSS Div stretch 100% page height : Just stretches the element to the window height and doesn't work when the content is larger than the window.
Absolute position background 100% of page height : illustrates the problem, but has no accepted answer, the original poster ends up using JavaScript.
The problem is that your absolutely positioned div is larger than your body which is why you are having the problem of the white background. If you simply add overflow:auto; to your #background, it should handle the overflow properly
Example
I have been having a heck of a time getting a background image to stretch on the screen to fit the screen so I have no decided to just add it as an image. Below is a image of what I am trying to accomplish. I have cleared all of my CSS and HTML for that section and looking to start from scratch again. Thanks so much for the help.
www.jobspark.ca
your parent container already fixed width by 960px. and if you change your container width it will affect your whole design. better try my below code. make position absolute your image and you can stretch
.image-block-outer-wrapper{
height:338px;
}
.image-block-wrapper{
position:absolute:
//align this div using margin
}
.image-block-wrapper img{
width:1200px;
//or increase original image width by photoshop and set width here whatever you want
}
If you wish to have the image stretched across the width of the page and are happy to have the image height scale proportionally try -
.image-block-wrapper {
width:100%;
display:block;
}
.image-block-wrapper img {
width:100%;
height:auto;
}
Please ensure that the "image-block-wrapper" element is not nested inside any other element which has a fixed width. Additionally the tag should not have width and height attributes specified.
Here's an Illustration of what I need.
On the left a fixed div and on the right a horizontally scrolling div that is something like 12000px. I need the right div to center vertically in the window when it is re-sized. I can't get the usual tags I use (position:relative and margin:auto) to work on this. I assume it's because the div overflows on the sides of the screen?
This interface should accomplish what your mockup shows. Thanks.
http://jsfiddle.net/9tV4y/2/
I'm not at all good at laying out pages, but this CSS is what you want for the left, horizontally scrolled, div,
.horizontal_scroll{
float:left;
overflow:auto;
white-space: nowrap;
width : 500px;
height : 500px;
}
and applied to the div,
<div class="horizontal_scroll"> ... </div>
Both the width and height are percentage-based (although you can change either to any other type of length that you would like). If you change the width of the left column, be sure to change the left of the right column to be the same. The vertical positioning is done with the top:0;bottom:0;margin:auto 0;height:70%;. Positioning, top/bottom margin, and height must all be set in order for it to work.
Here's the jsFiddle Demo.
HTML
<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>
CSS
<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>
Note: Be sure to set the height of all elements from html to #lc/#rc's parent nodes to 100%.