(I am new to html5, and don't know anything about css.)
When adding an image, if i assign width a percentage, it works fine i.e. the image width will be that percentage of the browser window width.
However, assigning height a percentage does not work at all. I can give whatever percentage i want and it will still render the orginal size or according to width (if specified). So, if i type :
<img width="40%" height="60%" src="saitama wall.jpg" >
it would just take width into consideration and adjust height according to original picture instead of taking 60% of window height.
**Why does this happen?**Is it because webpages have bounds only on width not the height (as you can scroll down)?
Yes, a page can scroll, so setting % of height is not the way to do this,
if you are looking to set an image compared to the browser window size, try using vw (view width) and vh (view height) instead of percentage ie
<img src="saitama wall.jpg" style="width:40vw; height:60vh">
more info about css units:
https://www.w3schools.com/cssref/css_units.asp
Handling image dimensions is not recommended using HTML attributes. Using CSS is a better option. So using CSS your IMG tag should be as follows
<img style="width:40vw; height:60vh" src="saitama wall.jpg" >
Related
I'm creating a website with a flexible layout. I have a background video, and I want to set it so that it has either 100% width OR 100% height. I only want the width OR the height to be used in any given situation, and I want the browser to choose whichever of the two dimensions would make the video the largest. I can't use min-height and min-width, because the video is significantly larger than the size of the screen, so I have to set an actual width and actual height, but I want the browser to switch between using width or height depending on the aspect ratio of the screen.
Does anyone know how this could be done? Ideally the solution would only use CSS and HTML, but if this can only be done with JavaScript, I'm open to any suggestions! Thanks in advance!
Adding a meta tag with viewport as it's name and then setting position attribute in css might do it what you needed.
Combining min-width/height with viewport width/height:
CSS:
#backgroundVideo{
min-height : 100vw; /* the height will always be at least as great as the viewport width */
min-width : 100vh; /* the width will always be at least as great as the viewport height */
}
I am trying to make a responsive iframe, it kind of works for width by setting width=100%, but doing so for height causes this: http://imgur.com/6pZJUb7
Iframe is placed inside <div class="w3-half w3-center">, I am using w3 css.
I assume that you want to maintain some sort of aspect ratio in your iframe.
Percentages only work in heights if there is a definite height set of the parent element.
The viewport-height (vh) and viewport-width (vw) work very well for making responsive elements because they don't need any container heights to be set, but they can look very different depending on the display.
Something like this will give you a responsive 4:3 aspect ratio:
div.wrapper {
width:40vw;
height:30vw;
}
Adjust the values to suit your needs.
I am trying to make a website with a fluid layout. So to do this I am trying to use percentages as measurements. If I am not mistaken, the percentages are calculated from the parent element. Since the html tags does not have any set width, how does the body tag calculate 100% width? does 100% means the full resolution of the screen that you are viewing the page?
thanks
You have to read the specs to find the answer to your question:
https://www.w3.org/TR/CSS22/visudet.html#x3 says about percentage widths:
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
About containing blocks:
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details says:
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element is <html> (https://www.w3.org/TR/html-markup/html.html).
The screen is considered a continuous media.
The relationship between viewport and canvas is simple:
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
So, trying to simplify this, the canvas size considers the content size even if it doesn't fit on the browser window.
The browser window contains the viewport (considered without menus, scrolling bar and status bar).
So, if <body> has 100% width, that means it would be the same width as the <html> element, which width is equal to the viewport's width.
You can easily find the viewport width by inspecting the css for <html> element on Chrome.
100% width for the body tag means 100% of the html width, which again is the full width of the viewport, which on desktops will be the browser window, on mobile devices the screen width.
Using just HTML and CSS would not suffice to get the width, you would need to use Javascript, or even better, a framework like jQuery that would help you get the body's width.
Using jquery the code would look something like this:
$(document).width();
You can find out more about it here.
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.
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');
});