i have 3 images. One per layer. Each picture must change its size and still be positioned with relative to each other. First layer is like i bg for second, and third is just glare fore bg and second layer. I try some kind, but my second layer width does not match to the parent div.
<div class="parent">
<img src="_/pic/bg.jpg" alt="" class="bg"/>
<div class="cont">
<img /> or some text
</div>
<img src="_/pic/shine.png" alt="" class="fr"/>
</div>
sorry for bad English
should look like this http://i5.photobucket.com/albums/y155/R_E_D/example.jpg
also i use
img {max-width: 100%;}
feel free to change html and css
your second layer doesn't match up because it doesn't have the same relationship as the other two layers with the parent div. The second layer is inside of a div.
Moreover, unlike img's, div's are dimensionless by default. You have to set the width on those too to have it be resizeable to match the parent div like the other two layers.
Given your HTML above, try this CSS:
img, .cont {max-width: 100%;}
try to place the layers in a fluid-container, and make the container responsive, create a container if you already don't have one
.container {
position: relative; /* Important */
width: 200; /* Any width */
height: 200; /* Any height */
top: 0;
left:0;
margin:auto;
}
after that add each layer in a class inside the container and make sure you use the absolute position in each layer..
adjust the layout for responsiveness and let the container use do the magic
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 have div with width style 65%.
Then I put an img inside this div without any css style attributes, but this img width above 65% and move out side the div frame.
How can I adjust the img width without give it any css style?
<div style="width: 65%">
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>
Try this.
img{
width:100%;
height: auto;
}
Set as a background image
<div class="product-image" style="width: 65%; background-image:url(assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg');"></div>
Not sure what you want to do, could you clarify?
In any case, you can, and you can't, depending on how you look at it. Most images are pixel 'grids' and will have a set size in pixels, no matter what you do.
You can set the size in HTML:
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg" height="42" width="42">
But this will not actually resize the image, just push it together or stretch it, so your quality will suffer. (Same with CSS) And these days this is seen as a bad way of doing this.
If you cannot target the image directly, maybe targeting the image as a child of its container works for you?
div img {
width: 100px;
height 100px;
}
But really, you should explain more what you want to do and why your limitations are what they are.
Use !important inside your div tag style.
CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.
For example in your case:
<div style="width: 65% !important">
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>
The first rule now has precedence so the later rule is ignored and the img style will take after it's div.
Let me know if this helps.
your image is bigger then your div because the css does not apply to the image,
try using
html
<div class="image">
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>
css
.image{
width: 65%;
}
.image img{
width: 100%;
}
this will make a div width the width of 65% of the page and the image will be 100% of the div width.
Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.
How can I make the image responsive while still keeping its original width?
You can put the image in a wrapper and give the wrapper the width you want the image to have.
HTML
<div class="imgwrapper">
<img src="img.jpg" class="img-responsive">
</div>
CSS
.imgwrapper {
width: 80%;
}
The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.
If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.
You should have a wrapper around the image defining the actual size of the parent that could be used to place that image. It will be related to the parent div. Then apply .img-responsive to the image. This will cause the image to have the same width as the wrapper.
HTML
<div class="wrapper">
<img src="your-image.jpg" class="img-responsive" />
</div>
CSS
.wrapper {
width: 50%;
}
If you want to keep the original size (it will be resized to have small size but never higher), you should also add a max-width which will have to correspond to the image's original size. This will overwrite the original value of 100%
.wrapper img {
max-width: 280px;
}
The .img-responsive class applies max-width: 100%; and height: auto; to the image, so if you want to keep its original width explicitly you have to set width of image using width attribute of img tag.
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 have to create a div that should look like
<div id=1>
<img></img>
<div id=2></div>
</div>
the div with id 2 should appear at bottom-right corner of image, and the size of image is not fixed what should be the css applied to div with id=2
div with id =1 has no position defined so uses default and same is with image and i cannot change these
only div with id=2 is editable to me. Please suggest something
If you need to position the second DIV on top of the first DIV, then the best solution would be to position the first DIV with position:relative; and then use absolute positioning on the second DIV. The first DIV would have to have a fixed width or to be floated to limit it's width to that of the image.
If you have no way to control the first div, you are in a bit of a tight spot. You still need to make sure that the first div has the same width as the image, either by setting width explicitly or by using a float. You could then position the second DIV with negative margin and using position:relative in conjunction with z-index to make it flow on top of the image. But that would mean you'd have to know the height of the second DIV to make up for that exact amount using negative margin. It would work, but the solution wont be as robust as the first.
If you just need to have the text below the image it's a bit easier, just using plain old floats. I've coded up a very basicc version of all the three scenarios here: http://jsfiddle.net/laustdeleuran/7CnSh/
I hope it's useful.
If you cannot edit the CSS for div #1, you're sort of screwed.
If you could just add {position:relative} to that div, you'd be in business. Absolute positioning will target the first parent with 'Relative' positioning. Since the default of div 1 is 'Static'...Positioning won't work.
'Float' might work, div 2 would technically need to come before div 1 - thus causing div 1 to inherit the float of div 2; however, that would also stack your image atop div 2 rather than below it. ... So Float is out as well.
IF you can add CSS to div 1 and div 1 img, then an easy fix is this:
* { margin:0; padding:0 }
#one {position:relative; text-align:right;}
#two {position:absolute; bottom:0; right:0}
Good luck...
I think you are looking for float style.
Using numeric ids is a bad idea, so let's say you've called your divs div1 and div2.
As you can't style #div1 or the image, the only thing you might try is setting a negative margin on #div2. Try either one of:
#div1 { display: inline-block; width: 100px; margin-left: -100px }
Or, simply:
#div1 { margin-top: -100px }
Where the 100px values are just arbitrary and you'll need to decide on appropriate values depending on what you're putting in #div2
First, some valid HTML. But I guess that wasn't your real HTML?
<div id="div1">
<img [..] />
<div id="div2"></div>
</div>
You could this with position: absolute and negative margins.
#div1 { display: table; position: relative; }
#div2 {
position: absolute;
width: 50px;
height: 50px;
margin-top: -50px;
right: 0;
}
display: table should make the first div match the width of the image. position: relative so the second div will position itself relative to first div.
This might work (not sure of relative+table). But I haven't tested it. If it does't work, I suggest that you work with JS to position the second div, it's very easy.
try this:
<div id="d1">
<img src="https://encrypted.google.com/images/logos/ssl_logo_lg.gif"></img>
<div style="margin-left:225px;margin-top:-25px;z-index:1000;position: relative;" id="d2">Your Text</div>
</div>
you can play with the margin-left and margin-top