I'm validating my HTML 5 pages and I get a lot of errors because I specified the width and height of my images in percentage. I though that this was the best way because if I specify it in pixels it won't resize when the site is viewed on a smaller device.
What's the correct way to specify the width and height of an image in HTML?
Thanks
If the original image is the aspect ratio that you want then just specify the with % and the height will change automatically. Make sure that the height of the parent div does not have a specified height as that may cause some problems. Also positioning of the rest of the page should be relative.
Related
If only one of the attributes height or width is set for an img element, most browsers seem to keep the proportions of the image.
This is from the HTML 4.01 reference:
When the object is an image, it is scaled. User agents should do their
best to scale an object or image to match the width and height
specified by the author.
http://www.w3.org/TR/html401/struct/objects.html#edef-IMG
Would it be wrong of a browser to scale the image non-uniformly, that is changing only the height or the width of an image?
Update 2015-08-12: Dillo (version 3.0.4) is an example of a browser which does not keep the proportions of an image if only height or only width is set.
If you look at what Bootstrap does with the .img-responsive class, it only sets height and max-width. http://getbootstrap.com/css/#images-responsive
If a browser didn't auto scale the width based on the height, this widely used CSS package would fail.
I can't speak for the spec authors, but from my PoV as a web developer if you scale non-uniformly your user agent is broken and none of my sites will render properly for you. Why would I ever want a non-uniform scaling? Especially one where one side is just determined by whatever size the image happens to be?
I need to preserve the aspect ratio of a div when the browser window is resized.
I have done a good bit of searching on this, and it is possible to use padding to preserve the aspect ratio of a div by making its height relative to its width, whenever the width of the screen is altered.
The technique is shown here on Stack Overflow, and in particular, this linked to example shows the technique in action.
But I need to do the opposite. Rather than making the height relative to the width of the div, I need the width of the div to change whenever the height of the browser window is altered. I need to do this because I have a background image that I want the content to flow relative to, and that background image has a 100% height, and its aspect ratio is preserved.
I have tried using linked method, but swapping horizontal for vertical attributes. It isn't working. I have no idea why. Perhaps someone can show how to do this.
I need the width of the div to change whenever the height of the browser window is altered.
For a pure CSS solution to that, you will have to wait for a broader implementation of either calc() or the vh unit.
I don't know if this is possible in pure CSS, but there is a possible way with jQuery, see this discussion
Maybe something like mmoustafa suggested:
$(window).resize(function() {
$('#my-div').css('width', window.innerHeight*0.4+'px');
$('#my-div').css('height', window.innerHeight*0.2+'px');
});
I would like to resize an image on my website. I know how to do it by either resizing the image before or calculating the width and height and setting the values in pixels. But I use the same picture multiple times with different dimmensions, so it would take me less time if I could resize the image relatively to its own size.
<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>
I have tried this, however the problem is that the size is set relative to its parent element.
There's no way to do what you want automatically using HTML or CSS alone. You'll need to use JavaScript to get the image's dimensions, then calculate a percentage of those dimensions and reapply them to the image in pixels
There is a method, but it isn't perfect. It requires a wrapping element whose display is set to 'inline-block' and the image is resized using 'max-width'.
The issue is that the parent element retains the image's original width, which could cause problems depending on your requirements.
Example: http://jsfiddle.net/amustill/GnEw5/
Is it possible to make an element behave/sized like the background-size:contain? For reference, here's a page demonstrating background-size:contain (try resizing your browser window and see what the background image does).
That is, I want to make an element with constrained aspect ratio, with width and height such that either width or height will be 100% of the window width (and the other will be whatever is necessary to preserve ratio and keep the entire element visible in the window without scrollbars)?
For example, suppose I want an element to have a ratio of 16:9. If someone's browser window is super wide and not very tall, then I want my element's height to be 100% and the width would be less (whatever is necessary to keep the element's ratio 16:9). If someone's browser window is really tall and not very wide, then the width would be be 100% and the height would be less (again, whatever is necessary to preserve that element's target ratio).
I'm thinking the only way to do this is with javascript. Is there some magical CSS way to accomplish this that I don't know about?
I guess you want to have a liquid template view.
Checkout this example if it suits your need
http://www.maxdesign.com.au/articles/liquid/liquid-sample1/
Thanks.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D