How can I center an img in a parent div tag which is set to overflow: hidden. That is, what I want is to clip the image but clip on both the left/right so the middle of the image is shown.
<div class='wrapper'>
<img/>
</div>
Then styles something like:
.wrapper {
position: absolute;
/* position details here */
overflow: hidden;
}
.wrapper img {
height: 100%;
margin-left: -??; //what here?
}
-50% would be the width of the parent, but I want the width of the img itself.
Firefox supported CSS is acceptable.
http://codepen.io/gcyrillus/pen/BdtEj
use text-align , line-height , vertical-align and negative margin. img virtually reduced to zero, will center itself.
.wrapper {
width:300px;
text-align:center;
line-height:300px;
height:300px;
border:solid;
margin:2em auto;
overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;
/* to show whats been cut off */
position:relative;
z-index:-1;
}
For horizontal only :
.wrapper {
width:300px;
text-align:center;
border:solid;
margin:2em auto;
overflow:hidden
}
img {
margin:0 -100%;
vertical-align:middle;
}
Try to add
display:block;
margin:0px auto;
to ".wrapper img"
Hi please check example
its solve your problem
HTML
<div class='wrapper'>
<img border="3"/>
</div>
CSS
.wrapper {
/*position: absolute;*/
/* position details here */
overflow: hidden;
text-align:center
}
.wrapper img {
height: 100%;
}
Related
I have built this little ap in angular and would like to the container element to stretch the full height of the page, when the content doesn't fill the height of the page for example on a large screen this page doesn't:
http://purepremier.com/#/teams/57
I tried setting it to
position: absolute;
top:0;
bottom:0;
height:100%
but when the content overflows then the height of the container only stretchs to the viewport height.
Any ideas? Or is theere a way in angular to add the class to the body instead?
Yep, simply
* {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
background: red;
}
<div class="container">
</div>
JSfiddle Demo
Support for viewport units
Or for an alternative
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
min-height: 100%;
background: red;
}
<div class="container">
</div>
Absolute positioning is not the way to set full document height, but it sets to the viewport height. You can use fixed position instead:
#element{
position: fixed;
top:0;
bottom:0;
}
html, body {height:100%; min-height:100%; margin:0; padding:0;}
#full {background:red; height:100%;}
<div id='full'>hmm</div>
I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.
#container{
height:auto;
height:100%;
min-height:100%;
}
#top{
height:175px;
min-height:175px;
max-height:175px;
}
#bottom{
height:70%;
}
<div id="container">
<!-- top div set to 100px -->
<div id="top"></div>
<!-- bottom div dynamic height based on remaining real estate -->
<div id="bottom"></div>
</div>
You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:calc(100% - 175px);
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
Or use CSS table layout if you need to support more browsers.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
width:100%;
display:table;
}
#top, #bottom {
display:table-row;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:100%;
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
You can use height:calc(100% - 175px); for this:
http://jsfiddle.net/9ygz4pnj/
html,body,#container{
height:100%;
}
#top{
height:175px;
border:1px solid red;
}
#bottom{
height:calc(100% - 175px);
border:1px solid green;
}
You can achieve this by defining a height and min-height on your containers.
First of all you need to define a height: 100% in your body (and html).
Than you need to create a container div which will be the mother of your top and bottom divs.
Than use position: relative and min-height: 100% in your container div.
You can align your top div to top: 0 and left: 0 a definite height and position absolute.
You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.
JSFiddle Example
Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.
This is a basic css file that you can use.
html, body { height: 100%; margin:0; }
.container {
position: relative;
min-height: 100%;
}
.top {
background: black;
color: white;
height: 200px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
background: yellow;
height: calc(100% - 200px);
overflow: scroll;
}
HTML code:
<div id="container>
<div id="wrapper">Some text
</div>
</div>
CSS code:
div {
position:fixed;
display:block;
}
#container {
max-width:1500px;
height:10%;
}
#wrapper {
width:50%;
height:10%;
}
Now, my wrapper and container have the same size, although you would expect that the wrapper is half the height of the container, and one tenth the height of the container. Unfortunately, they are evenly big right now. Can someone please help me out?
You need to change max-width to width on #container to get the width right:
#container {
width: 1500px;
height: 10%;
}
And you need to remove position: fixed and set height on html, body to get the percent height to work:
html, body {
height: 100%;
}
div {
position: fixed;
display: block;
}
JSFiddle
(You're also missing an ending " in the container div, but I assumed that was a typo)
#container {
display:block;
position:fixed;
width:100%;
height:10%;
background-color: blue;
}
#wrapper {
display:block;
position:relative;
width:50%;
height:100%;
background-color: red;
}
How do I center align the image to vertically and horizontally to the div.
I need to get this without fixing height or padding because the image sizes are not constant so it should be flexible with all the images.
Here is my trail
http://jsfiddle.net/yHdAx/2/
To center align an image, you have to set it's display to block, and then the left and right margins to auto. I also did this with the top and bottom margins, in the new code example. Here is the code required to make this work:
CSS
.test {
background-color:#999;
height:60%;
display:block;
vertical-align:middle;
padding-top: 25%;
padding-botton: 25%;
}
.test img {
max-width:50%;
vertical-align: ;
display: block;
margin: auto auto auto auto;
}
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
</div>
Hey now you can used to table-cell properties in your div as like this
live demo http://jsfiddle.net/yHdAx/3/
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
Css
.test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
text-align:center;
}
.test img{
max-width:50%;
}
more info http://www.brunildo.org/test/img_center.html
Apply display:block to the image and set its margins to auto.
.test {
background-color:#999;
padding: 50px 0;
}
.test img {
display: block;
margin: auto;
}
Here is the fiddle, http://jsfiddle.net/yHdAx/5/
I tried to play with only one div
div {
display:table-cell;
background:red;
width:500px;
height:500px;
vertical-align:middle;
text-align:center;
}
I hope this will also help you :- http://jsbin.com/ihunuq/3/edit
What if you don't set a height on the containing div, would the desig break then?
To center the image just use
.test img {
display:block;
width:25%;
margin:0 auto;
}
You can use position: absolute.
Something like that: jsfiddle.
.test{
background-color:#999;
height:60%;
width: 100%;
position: relative;
}
.test img{
max-width:50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
i have a mind bobbling question.
I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:
#container {
position:absolute;
top:0;
bottom:0px;
left:0;
right:0;
margin:20px;
}
but then it wont expand in height with content.
Anybody know the divine technique for this?
I'm pretty sure it isn't possible to do with a single element, but if you don't mind having 3 spacer div elements, this solution works in all browsers:
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-left: 20px;
margin-right: 20px;
margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
background-color: #ccc;
}
.spacer.edge {
background-color: white; /* same as body background */
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="spacer edge"></div>
<!-- content here -->
<div class="spacer"></div>
</div>
<div class="spacer edge"></div>
</body>
</html>
Here's a fiddle to play with: http://jsfiddle.net/dTyTW/
I you want to expand the div with the content , then you need to set position : relative and in order to stick towards the bottom padding-bottom also need to be set.
#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;
}
Values can be adjusted as per the requirement.
Try here
Remove the margin and give each position a 20px.
Also remove the bottom.
Add padding-bottom:20px;
#container {
position:absolute;
top:20px;
left:20px;
right:20px;
padding-bottom:20px;
}
http://jsfiddle.net/jasongennaro/w7dQP/3/
EDIT
If you are not opposed to using some jQuery, you could also do this
var h = $(document).height();
var h2 = $('#container').height();
if(h2 < h){
$('#container').height(h);
}
This ensures that if the div is smaller than the browser viewport, it will expand to fit it.
Once the text is as big or bigger, the styles will take care of it.
http://jsfiddle.net/jasongennaro/w7dQP/8/
<html>
<style>
body
{
margin:0px;
}
div
{
position: absolute;
padding: 20px;
}
img
{
position: relative;
width: 100%;
}
</style>
<body>
<div>
<img src="http://manual.businesstool.dk/screen.jpg" />
</div>
</body>
</html>
Use the padding property... look up the box model.