I started learning HTML and CSS and encountered the following problem.
It is said, that a child element is always (as of now) smaller than the parent container.
Here is the thing I don't understand.
.img-container {
border: 10px solid crimson;
width: 100px;
}
.img {
width: 300px;
}
<div class="img-container>
<img
scr="apple.jpg"
class="img"
/>
</div>
And this is what I get in the browser:
index.html
I've researched a lot but still didn't get it.
Why is the child element (the image) wider than the parent container?
you do understand that you gave the image a width of 300px when your container has a width of 100px right? i mean you literally made the image wider than container yourself
you can use overflow to handle this. give overflow:hidden to your container to hide anything that does not fit inside it. or overflow:auto to scroll.
Related
I have the following html structure:
<div class="parent">
<img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>
And the following css:
.container, .parent{
position: relative;
}
.child{
display: block;
max-width: 100%;
height: auto;
position: fixed;
}
Because the image is fixed the parent's height is probably 0. Therefore the container is placed over the image. However I want to have the image fixed and the container to be placed after the image, while keeping it responsive.
Any help would be appreciated!
UPDATE: I'm trying to get the scrolling behavior shown in this JSFiddle, but to make the container always be at the bottom of the image, even if the screen width is (let's say) under 300px.
In your Fiddle, I was able to achieve the desired behavior by changing the .container property from
margin-top: 300px to margin-top:50%
You'll likely not see a change if you add a position class to the image. That's used on div tags. Try adding that class to a new div tag with which you surround your image.
Alternatively, you could add a display: block to your image, but that makes things more complicated.
I think this is what you're asking, but I'm still a bit confused.
I'm trying to implement an image that has an image overlayed on it. Since I need to tell that this image has a video content on it. Now from some post here I've encountered this code (pardon me I lost the link) which actually works but problem is it also overlay the text content below the images. For reference of what exactly I'm trying to achieve I have this code here. I just hardcoded on what I wanted to see and here's the code anyways:
<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>
<div><br /><br /><br /><br /><br /><br />Text should be below the image</div>
I just need to fix the part where images overlaps on my text as well. Thanks!
Fixed version in jsfiddlehttp://jsfiddle.net/uS7nw/270/
Just a few tweaks needed. Specifically using
position:relative
on .container and .imageOne
and
top:0
on .image
Currently your divs overlap because you have the parent container set to a fixed position, therefore it will be anchored to (0,0) of its parent, any other elements are then drawn to the default (0,0) coords of there parent (body in this case).
In order to fix this, make the .container elements position relative, the text div will now have its position drawn at (0,100) as container has a height of 100px relative to the body.
This also makes sense for the case that you want your .image to overlap in .container, both .image divs have their position set to absolute meaning they will be drawn at (0,0) within their parent (.container in this case).
Updated css would look like this:
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
position: absolute;
width: inherit;
height: inherit;
border: 1px solid red;
}
Please note that the parent div now contains information of the width and height, the children images now inherit this information from the parent, however you could make them smaller. Hope this helps :)
JSFiddle Solution
I am trying to get an<img> to resize dynamically. Sometimes I need that image to go beyond the box it is bound by, but it seems to stop and distort. Can this be done?
<div>
<img src='smjpg.jpg' />
</div>
div{
width: 20px;
}
img{
width: 100px;
}
Just use CSS for the bounding div.
#imgDiv {
overflow:visible;
}
If you still want the parent container to grow for other elements, with no fixed size, then consider using the float property or position: absolute on the child element. Absolute positioning removes the child from the flow of the page, so the parent container will see nothing to expand around. Floating has a similar visual effect, provided overflow is visible and no clearfix is used, but the child does affect the layout of its siblings. Here's a demo: http://jsfiddle.net/lpd_/rd4HP/3/ (try adjusting the result width).
I have a simple DIV with a fixed height like and several images with individual heights inside (their height is equal or less the height of the outer DIV):
<div>
<img src="..">
<img src="..">
...
</div>
This markup is as-is and can not be changed. I need to display all images side by side and all images should be vertically aligned with the middle of the DIV (so the padding top and bottom is identical per-image).
How to do that without changing the markup? Various answers deal with a markup where the image is placed itself inside a DIV which is not the case here.
After re-reading your question, that the <div> is at least as high as the highest image, simply do this:
CSS
img {
vertical-align: middle;
}
Try it here: http://jsfiddle.net/AsD9q/
You can also prevent the div from breaking (when the viewport is to small) by setting an explicit width or using white-space: nowrap; on the container: http://jsfiddle.net/MvDZJ/ (using width) or http://jsfiddle.net/xMtBp/ (using white-space)
That's the outcome:
First answer, which works with every height of the div:
As you said nothing about container itself, I assume, that it's not wider than the viewport. Than you could simply do something like this:
HTML
<div>
<img src="http://lorempixel.com/200/100/">
<img src="http://lorempixel.com/200/80/">
<img src="http://lorempixel.com/200/120/">
<img src="http://lorempixel.com/200/60/">
</div>
CSS
div {
display: table-cell;
vertical-align: middle;
/* only added for demonstration */
height: 200px;
border: 1px solid red;
}
img {
vertical-align: middle;
}
This won't work in IE7 though, as it can't handle display: table-cell. You can try it here: http://jsfiddle.net/3vXXy/.
This can be done with jQuery, the problem is you have no explicit selectors to work with so it would affect every image in every div on the page.
First you need to set the images to the top of the div like this in the CSS:
div img{vertical-align:top;}
Then take each image in succession, get it's height and set it's top padding to half the difference between the height of the div and the height of the image.
$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
$(this).css('margin-top',margin);
});
});
Again, not an ideal solution without good solid selectors, but it does work. http://jsfiddle.net/calder12/H4Wkw/
This seems like a really amateur question, in my opinion, but nonetheless it's still a frustrating anomaly.
This is actually the 2nd part of a 2 part problem. The first part is a rather common one, involving getting an element to stretch to 100% height of its parent object. In my demo, I have the following HTML:
<body>
<div id="sbcontainer">
DIV 1
<div id="sbcontent">
DIV 2
<table id="sbmaintable" cellspacing="0">
<tr>
<td>
TABLE
</td>
</tr>
</table> <!-- END MAINTABLE -->
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>
I want each element here to fill all vertical space within its parent element. I tried used the following style on each of the elements (Please note that BODY and HTML are also set to 100% height in my demo):
min-height: 100%;
height: auto !important;
height: 100%;
The result was as follows:
As you can see, the outermost DIV followed the 100% height property but the rest did not. As implied in the image note, but not actually shown in this image, I tried setting the 2nd DIV (red border) to a static height of 400px to see if the TABLE within would stretch to 100% height, and it still did not.
I then found that if I removed height:auto; from each of the elements, they would follow the 100% height property, but with an unwanted side effect:
As you can see in the image, each element is now truly 100% the height of its parent element, forcing the bottom to extend beyond the boundaries of its parent. (Even in my first example, the outermost DIV with the green border extended farther than desired because there is another sibling DIV above it on the page). NOTE: After looking more carefully, I can see that the blue TABLE element is not actually the same height as its red DIV parent, but it still extends beyond its boundary. I'm not sure if this means anything, but I do notice it.
One would think that this would be an easy thing to solve, but despite my efforts, I've had no success.
If I keep only height:auto; and remove the 100% properties, this does not stretch them at all.
I have searched for solutions on this via Google and StackOverflow, and although many sites covered 100% height issues, I still haven't found an actual solution.
I am currently testing this in Firefox.
You can use absolute positioning.
#b {
width: 40em;
height: 20em;
position:relative;
background: red;
}
#c {
position: absolute;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
background: blue;
}
<div id="b">
<div id="c">
</div>
</div>
I believe the proper solution to something like this is using a flexbox. Flexbox has great support the lately with all modern browsers.
Use following for the parent
.stretch-items {
display: flex;
flex-direction: column;
}
And for the item that should grow
.stretch-items .stretch {
flex-grow: 1;
}
Here is a codepen demonstrating it https://codepen.io/giorgosk/pen/NWWaqPO