I am using bootstrap templates and have split the page into a fixed sidebar and the remaining part of the page is one big picture. However the picture will not match the height of the sidebar. There is always a white gap after the picture even though the sidebar has 100% height. So how can i make my picture take up 100% height?
My html:
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<div class="sidebar affix">
</div>
</div>
<div class="col-sm-9 pic">
<div><img src ="homepage/pic5.jpg" class="img-responsive"></div>
</div>
</div>
</div>
My Css:
.row.content {
height: 684px;
}
.sidenav {
height: 100%;
}
.pic .img-responsive {
height: 100%;
}
.pic {
padding: 0;
position: relative;
}
.sidebar {
width: 22.5%;
top: 0px;
}
.pic > div {
position: absolute;
}
Try to change like this
.pic > .img-responsive {
height: 100%;
}
You are placing your img in an div which you give position absolute, while you give the img position relative in the div with position absolute.
position: absolute
Places an element absolute, meaning on its self. There for any heights or width of any elements around it will not effect the element, it is absolute.
I havent tested it but you should remove the position:absolute, position:relative and the div around your img.
Related
I want to make it so that one div can scroll horizontally independently of the other div. Scrolling divs should have a minimum width (e.g. 500px) and not be aligned to the width of the content. The other div has a width of 100%. How can i do this?
<div>
<div #parent style="width: 100%"></div>
<div #child style="position: relative; width: 100%">
<div #child class="child-container"></div>
</div>
</div>
Here is my css:
.child-container {
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
I edited the post to be more realistic
What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.
Here is MDN's documentation on this property.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
Update
Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.
.padding {
padding:25px;
}
.container {
max-width:400px;
}
.child-container {
background:#dedede;
overflow-x:scroll
}
.child-item {
min-width: 500px;
}
<div class="container padding" style="background:#ededed;">
<div class="padding">
<h1>Parent</h1>
</div>
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>
</div>
</div>
</div>
Right now I have a div that I need to have over 100vw in width in order to get the effect I want. What I don't want is for the div to go off the right side of the screen. I want the view to stay at 100vw, no horizontal scroll bar. I have tried overflow: hidden; and overflow-x:hidden; and it is not working.
CSS
.stripe {
height: 500px;
width: 150vw;
top: 350px;
margin-left: -30vw;
position: absolute;
background-color: #4775de;
transform: rotate(6.2deg);
z-index: -1;
}
HTML
<div styleName='hero'>
<div>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Assuming .hero has no padding or margin, give the parent div of .stripe width:100% (or 100vw) and overflow-x: hidden.
You can try to add another div for wrapping the stripe div. and give overflow:hidden. please refer below code.
css
.wrap{position:relative;
width:100%;
height:500px;
overflow:hidden;
}
HTML
<div styleName='hero'>
<div className="wrap>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Hiding the overflow in the body tag worked for me when I had this issue.
body {
overflow-x: hidden;
}
First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:
Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Consider using image as background in conjunction with background-size: cover.
I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>
try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.
you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.
Need to solve this little task:
Center vertically and horizontally IMAGE in DIV.
DIV height must be proportional to width.
DIV width is stretchable (for example 50% of parent div).
IMAGE width and height = auto (it must fill div if its width or height > than div width or height, and have primary size if its < div size, and stay proportional).
I know how to make 2 and 3.
HTML:
<div class="container">
<img src="img.png"/>
</div>
CSS:
.container {
width: 100%;
height: 0;
padding-bottom: 100%;
}
But how to center and middle IMAGE in this DIV?
There is a lot of ways to make 1 task with non proportional and non strechable div.
But I dont know how to make it all in full house of tasks.
Can you help? HTML and CSS may be any.
Did you try :
.container img {
vertical-align : middle
}
? It will verticaly align your image.
Try this:
<style>
.container
{
width :100%;
height :100%;
display :table;
}
.child
{
vertical-align :middle;
display :table-cell;
}
.child img
{
display :block;
width :50%;
margin :0 auto;
}
</style>
<div class="container">
<div class="child">
<img src="img.png"/>
</div>
</div>
Solved it by myself. Check here: http://jsfiddle.net/42trk8ux/17/
HTML:
<div class="width-50">
<div class="parent">
<div class="aspect"></div>
<div class="block">
<div class="tbl">
<div class="tbl-cell">
<img src="img.jpg"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.width-50{
width:50%
}
.parent{
position: relative;
}
.aspect
{
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
}
.block{
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: block;
}
.tbl{
display: table;
width: 100%;
height: 100%;
position: absolute;
}
.tbl-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
background: #aaa;
}
.tbl-cell img{
max-width:100%;
max-height:100%;
}
Here's my html
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div>
<div class="float float_txt">
text here!
<p class"a_p">a</p>
<p class"b_p">b</p>
<p class"c_p">c</p>
</div>
</div>
</div>
and css
.container{width:400px}
.box{display:inline-block}
.float{width:50%; float:left}
.float img{width: 100%; height:auto;}
.float_txt{background:red}
http://jsfiddle.net/MdtR8/1/
.container has a dynamic width (responsive design) and image will auto-resize itself.
I need to have .float_txt at same height as image, but I need a REAL height because I must divide a b c in percentage. Example:
.a_p, .b_p{height: 20%}
.c_p{height:60%}
How I can to this? only css no js :S
Why don't you solve it with JQuery. Here is the example of JQuery to calculate the height of .float img and add it to float_txt height.
$(".float_txt").css({
'height': $('.float img').height()
});
It's just one solution using JQuery. It's absolutely easier than using only css.
Jsfiddle
Here's one of the approaches.
I don't consider it to be the answer neither an elegant solution but this is one of the workarounds which actually meets the most important condition - it works (with some restrictions).
Here's the fiddle
First, we must assume that everything inside the .float_txt will be wrapped within those three paragraphs - they're meant to be 20%, 20% and 60% which is 100% all together so there's no more space for any other elements. Next, we wrap all three paragraphs with a div and put a copy of the image next to this div. We'll add the id="speculate" to the image.
The whole HTML will look like that:
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div><div class="float float_txt">
<img id='speculate' src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
<div class='content'>
<p class="a-p">a</p>
<p class="b-p">b</p>
<p class="c-p">c</p>
</div>
</div>
</div>
</div>
We'll use the #speculate image to set the height of the .float_txt div. The image will have visibility: hidden which makes it invisible but still occupying_ the space in its container. The .content div will be positioned absolutely and spread to the whole space of the .float_txt with top:0; right:0; bottom:0; left:0.
The paragraphs will be also positoned absolutely and placed with the top property. The disadvantage here is the fact that we must know the percentage heights of the preceding paragraphs, e.g. to position the second paragraph we must set top: 20% because the first paragraph has height: 20%. I hope it's clear.
The whole CSS will look like this:
.box {
display: inline-block;
}
.float {
display: inline-block;
width:50%;
}
.float img {
width: 100%;
height: auto;
}
.float_txt {
background: red;
position: relative;
}
#speculate {
width: 100%;
visibility: hidden;
display: block;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content p {
margin: 0;
position: absolute;
}
.content .static {
position: static;
}
.a-p {
height: calc(20% + 20px);
top: 20px;
}
.b-p {
height: 20%;
top: calc(20% + 20px);
}
.c-p {
height: 60%;
top: calc(40% + 20px);
}