I know its easy to stack images on top of one another but I just wondered if this could be achieved but maintaining a fluid image? As soon as I use the position attribute, I have to supply a width. Then the image won't re-size with the browser.
Thanks for any help.
Joe
You could of course use width: 100%;. Also, you wouldn't need to put them inside divs if you just specify display: block; on the img element. You may have to specify max-width, but that depends on your particular application and required browser support.
A width : 100% works with position : absolute if display : block
Your problem is likely that you have only absolutely positionned img in your div, so its dimensions are null (because positioning rules.)
Two way to solve this :
make one img not absolutely positionned. Its dimensions will be be dimensions of the parent div
use a transparent img, with position : relative, with the same dimension than your real imgs : it's quite dirty, but it'll set the parent div dimensions.
These'll work only if your imgs' dimensions are the same. Otherwise, you must use a JS solution.
Make the photos the background on either an empty <img> or <div> with something like this
.container {
position: relative;
height: 400px;
width: 100%;
}
.container > div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div style="background: url('myimage1.jpg');"><!-- nothing --></div>
<div style="background: url('myimage2.jpg');"><!-- nothing --></div>
<div style="background: url('myimage3.jpg');"><!-- nothing --></div>
</div>
Related
I've seen several posts about how to auto-size a single image within an outer element. All these solutions seem to do this by making the image width 100%. But I need to stack several images side by side, each image having height equivalent to the outer element height put maintaining relative width. I tried doing image height=100% but that doesn't seem to work.
In my case, the outer element is a div set to a relative position within an outer div.
<div class="basicskin thumb">
<img class="background" src="/content/skinz/SolidBack/240px/SolidBack-sml_grn.png">
<div class="numbers" style="top: 14.8571428571429%; left: 6.46666666666667%; height: 68.8253968253968%; width: 87.2444444444444%;">
<img../><img../>
</div>
</div>
The styles look like this:
div.basicskin
{
position: relative;
display: inline-block;
}
div.basicskin.thumb > img.background
{
height: 32px;
width: auto;
}
div.basicskin > div.numbers
{
overflow: hidden;
}
div.basicskin > div.numbers img
{
width:auto;
position:relative;
}
My images want to render full size instead of relative to my "numbers" div.
What am I doing wrong?
Thanks for any help!
If you want to set height: 100%; to the <img/>, you should make it display: block; and give some height to the parent block.
height: 100%; works only when it's parent has set height.
For IE inline-block support you can use this fix:
.selector {
display: inline-block;
*zoom: 1;
*display: inline;
}
Setting height to % can be tricky, because your element is inside <body> and <html> that may not be with 100% height unlike you may be instinctively assuming. You have to set those elements height to 100% too to make sure you can expand things to the full vertical extension of the screen. I also recommend you head your html file with <!doctype html> to make sure those things work correctly in every browser.
In my Application I was making div of map as
<div id="map" style="height: 610px; width:100%"></div>
but to make my map responsive I want to make height also 100%, if I make height: 100% then it is not working.
How can I make height also variable like width so that map can be seen properly on any device.
Demo : http://jsfiddle.net/CcYp6/
If you change height & width of map then you will not get map.
You need to set the parent elements to height: 100%; first
html, body {
height: 100%;
}
Demo
Demo (This won't work as no parent height is defined)
Explanation: Why do you need to do that? So when you specify an element's height in % then the 1st question that arises is: 100% of what?
By default, a div has height of 0px, so 100% for a div simply won't work, but setting the parent elements height to 100%; will work.
You have to set the div size with JavaScript.
$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();
You can find a complete example here.
Use height="100vh" works in newer browser. but its ok.
Put a position: relative wrapper parent around it, then position your map absolutely to fill that parent:
.map-wrapper {
position: relative;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="map-wrapper">
<div id="map"></div>
</div>
If #map already has a parent that you can position relatively, just use that; you won't need the .map-wrapper element.
Leaflet Quick Start Guide could be clearer on this point as it's a common use case. The mobile tutorial hints at it.
I'm having a bit of a frustrating issue...I thought I found a few answers here but nothing as of yet seems to be working.
Here is an image to start off with:
http://www.shaunmbaer.com/wordpress/wp-content/uploads/2013/02/Melissliss_01.jpg
Then here is the html:
<section class="A">
<aside class="B"></div>
<header class="C">Title</header>
<article class="D">Lorem ipsum...</article>
</section>
And the css as of now:
A{width:100%}
B{width:220px; height:100%; float: right; background= #fff url("foo") repeat}
C{width:450px}
D{width:450px}
I am using wordpress (this bit is a post), so all of the content is automatically generated. I need div "B" to be 100% of the parent div. It does not have any content besides a repeating background image (the site is responsive and this div will disappear at the next breakpoint).
I cannot position them absolute since I cannot give the article ("D") a fixed height (at least I think that statement is correct...)
Can anyone help or point me to somewhere that can? Preferably a CSS solution, but jQuery is a-ok at this point too!
Thanks a ton2.
I'm pretty sure you can use absolute positioning for the B element, and specify 3 sides for the element to stick to:
.A {
position: relative;
}
.B {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 220px;
}
I've created a JSFiddle here:
http://jsfiddle.net/AsHW6/
What I'm attempting to do is get the down_arrow.png's centered in their containing divs. I was able to center the up_arrow.png's using auto margins. I'm using the fixed property to use them as footers, as I want them to be at the bottom of the div regardless of resolution.
My question is what is the best way to center a bottom fixed image within the width of its containing div?
Some code from the fiddle (I'm having trouble with the StackOverflow formatting):
.scroll-arrow-down {
position: fixed;
bottom:0;
}
I should add that I don't care about IE hacks/workarounds at all, this application will not be targeting IE in any way.
Any comments and answers are appreciated.
If you used fixed position it will be fixed to the viewport (which I don't think you want). Using absolute positioning will position the images in reference to the item that contains them.
I added a left:45%; which pretty much centers things, but depending on the width of your arrows that may need to be updated.
.scroll-arrow-down {
position: absolute;
bottom:0;
left: 45%;
}
http://jsfiddle.net/AsHW6/1/
You can wrap the arrow-down images in a div that gets aligned to the bottom. The div can then be set to have its content centered.
Wrapping in HTML:
<div id="list1">
<img src="image/up_arrow.png" class="scroll-arrow-up">
<p class="list-title" id="list-title1">Autonomous Behaviors</p>
<div class=".scroll-arrow-down">
<img src="image/down_arrow.png">
</div>
</div>
and the css:
.scroll-arrow-down {
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
text-align: center;
}
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.