For my mobile website I want to show images of different but known heights/widths with two constraints:
The image should take up the whole width of the browserview
The height should be scaled (down or up) accordingly to keep the proportions
As soon as the browser downloads the image, it is really easy with the following CSS:
<img src="myImageURl" style="width: 100%; height: auto;" />
But because the loading of the image takes some time, I want the browser to layout the image before it downloads it. So the browser does not need to rerender the page, once he fetches the image. I tried the following approaches, which failed:
// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" />
// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />
I would love some help here. But please in CSS, I don't want to use Javascript / jQuery if I don't have to.
UPDATE
I guess I am not the only one with this problem: https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height
As Pete already said, you can not do any (automatic) calculations before the image is downloaded, so the browser knows its width and height.
But since you are able to determine the aspect ratio of the image beforehand, you could try a “workaround” by adding an extra placeholder element around the image – and make use of the fact that padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom.
That could look something like this:
<div style="position:relative; width:100%; height:0; padding-top:50%;">
<img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>
This is a div element with no height, but a padding-top – that will give it an actual “height” of 50% of the computed 100% width. (That would be for an image with an aspect ratio of 2:1 – for 3:1 the padding-top value would have to be 33.333% accordingly – and so forth, basically height/width*100.)
That should span up our placeholder even before the image is loaded.
The image itself is positioned absolutely inside this relatively positioned placeholder – that makes sure it gets displayed at the same position in the document.
The only thing that might be problematic is rounding that has to occur for values with decimal points – 33.333% of 1000 pixels would be 333.33 pixels, and the browser has to round that down to 333 pixels. Should the resized image have an actual height of 334 pixels however, it would just flow out of the area the placeholder div is spanning up by that one pixel. May depend on the actual layout (and your fetish for pixel-perfect accuracy) whether that’s acceptable or not.
Related
Is there a way to resize a container to a percentage of its own content?
I'm having a tricky issue relating to scaled content. Doing a transform: scale(...) on something works as far as having it display as I'd like, but unfortunately, the content still has the same effective size of the original content. This is problematic when content needs to flow below the scaled content without vertical spacing.
For example, given this HTML:
<div class="scaled-preview">
<div class="content">...</div>
</div>
<div class="stuff-below">Stuff below</div>
...and this CSS:
.content {
transform: scale(0.4);
width: 250%; /* Inverse of the scale */
}
....stuff-below is spaced below it as though it was not scaled.
You can see this in this JSFiddle.
The size of the content being scaled is unknown, but the scale factor is known. Is there a way I can have .scaled-preview set to a height that is a percentage of its own content?
This might not be quite the solution you're looking for, but it may solve your problem in an unusual way.
By the time the browser is calculating transform information, the layout is sadly solidified, so I wasn't able to think of a way to have the content height reflect the transformed height. So, I tried working off of font-size instead. It transitions just as well, and you can even size elements off of it using em values. The only downside is, I had to specify a particular width: xxem value so that the varying font-size would not cause line breaks in the middle of the transition.
https://jsfiddle.net/07c7s83y/
The following CSS style dictates that an image that's 400 pixels wide will appear to be 200 pixels wide if it's placed in a div measuring 400 pixels...
img { width: 50%; }
But is there a style that makes an image display at half its own size, regardless of the container it's in?
I'm asking this because I have a lot of floated image slices to work with. For example, suppose you take an image of a dinosaur that's 400 pixels wide and slice it into quarters horizontally. The four resulting images might measure 350px, 300px, 280px and 200px. If I want to display them in a mobile device, I have to create separate styles for each piece, setting the width at half of the original width, one third the original width, or whatever.
So I just wondered if there's some sort of style I could use that would automatically reduce each image by a third, a half, etc. Thanks.
But is there a style that makes an image display at half its own size, regardless of the container it's in?
I can’t think of one simple property for the image itself – but if you place them in an element with display:inline-block, you’ll get exactly what you want:
<div style="width:400px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:600px"><span><img src="http://placehold.it/400x200"></span></div>
<div style="width:800px"><span><img src="http://placehold.it/400x200"></span></div>
div { background:red; }
span { display:inline-block; }
img { width:50%; }
http://jsfiddle.net/H8AQY/
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.
http://sorgalla.com/projects/jcarousel/
Above is the carousel application i'm using (one of the more popular open source ones at the moment) and I can't figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page - when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.
That carousel uses <img> tags which means you'd either have to specify each width in the markup like this:
<img src="..." height="..." width="170" />
or use the img selector in the CSS file, something like this:
.jcarousel-skin-tango .jcarousel-item-horizontal img {
width: 170px;
}
Either way, you'd also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:
ul#carousel {
width: 99999px;
}
The carousel would stop at the last image anyway, but at least you'd know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.
I have a <textarea> that needs to fit into a space whose size is not pre-determined (is a percentage of the screen size). I can get good results if FireFox by setting the regular CSS properties:
#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }
However in IE 6 and 7 I get different, odd results. In IE6 the textbox appears to have padding to both the left and the right, pushing the size of my container to grow. In IE7 the textbox has padding to the left, but does not make the size of the container grow - instead its right edge pushes outside of the container.
The height setting seems to have no effect in either IE6 or IE7; the <textarea> is 2 rows long in both cases, ignoring the height:100% directive.
Is there a consistent way to size a <textarea> across browsers?
Is there a way to get rid of the padding to the left of the <textarea>?
Update
Using position:absolute removes the padding, but the width:100% is still screwed up. IE7 seems to calculate the 100% width to be too large, resulting in a <textarea>that spills out of the <div> that contains it.
I'll create a stand-alone example if I get a chance...
I've seen this problem with ASP.Net textbox controls also in IE7. I couldn't remember where I found a solution (but props to the person that found it), but I was having the same problem where the textbox with width="100%" would actually break the DOM and my entire content section would "spill" onto a neighboring section (such as a table based navigation).
The solution I eventually adopted was to wrap the asp:Textbox inside its own table and set the "table-layout:fixed; width: 100%" property and on the textbox/textarea "position:relative; width: 100%;" so the block would look like this:
<table style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td>
<asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
</td>
</tr>
</tbody>
</table>
This is not the prettiest solution, but I have verified that it does work cross all browsers. I have a write-up on this issue HERE.
Hope this helped.
There may be a sneaky CSS way to achieve this that I don't know about, but in my experience this is one of the things where using a bit of Javascript is justified.
You could get the height you need (of the current window I presume) using JQuery or Prototype, or in pure Javascript: Get the height of the current document and then
document.getElementById("text_area").style.height = calculated_height+"px";
The left hand padding I find odd, though. Can you post an example?
In order to solve this kind of problems, one has to think about how percentage is handled in the browser. First of all.... percentages don't exist, they are converted to pixels at some point. The steps are 1) browser renders all tags, 2) browser measures outer, parent, percent-sized boxes to get its size in pixels, and sets the size of the child boxes according to their percentage size.
I think the first thing to verify is the size of textarea's parent box, and it's parent box, and so on. This can be done by checking the "Layout" information in Firebug and IE Developer Toolbar, and find out what's measured differently in both browsers. Once you find that element (or elemets) css can be adjusted to consider them.
Have in mind that percentage sizing considers the width and height of parent box content to size the child element and not padding. So, if a parent box width is 500px and has 100px padding, a child element with 100% width will be 500px and the 100px padding will be around it, and both elements will take 700px of your screen.
Try
adding a min-height:100% on the text area css. On the div containing the absolute positioned , set the position to relative on your css.
also use transistional Doctypes instead of strict, while your at it. Make sure there are no unclosed tags. I would be better if you can make the page XHTML or HTML standard compliant so that you will have less problems with cross browser compatibility.
Try adding display:blockand border:0 to your #text_area.
The former should take care of the height-issue and the latter prevents the width:100% to spill over.