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.
Related
(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" >
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 want a section of my site (banner) to be an image that fit all width and for the image to maintain the full width (not the px width, but in percentage) at all times. I don't care about the height being too low, I need the image to always show all the width content and the height to be auto.
I'm using background-size: contain and this keeps the full width of the image but the height needs to be calculated, because then the container height will be higher than the image's. I've tried using viewport units but it's not consistent between different resolutions (maybe I'm doing it wrong but the value for a higher resolution doesn't work for a lower one).
How would I make this responsive?
The markup:
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
I'm using CSS for this image because, as we all (should) know, design images don't belong in the markup. So the image has to fit all the width, what would be the difference between 100% and 100vw? The first one is the parent's width, body has all the width in the screen and the second is the (again?) the device's width?
Will this approach be compatible with tablets and phones? Should I use a second image optimized for these cases?
To calculate the height of the element I'm using a formula that calculates the height while maintaining the aspect ratio:
New height = New width / (Original width / Original height)
So translating this into css gives:
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}
This approach offers a fluid scaling, so no break points needed.
I am having issues with a bug in a project I am working on.
The mobile menu which I want to take the full height of the viewport when it is less than 768px doesn't have a height even though I set it to 100%.
It will only be in view when toggled using the hamburger icon.
The nav element is absolutely positioned and the mobile menu is the last child element of the nav element.
The nav element is absolutely positioned so that the background is transparent and the section below it can be at the top of the page.
I want the div with class mobile_linksto take up the full height of the page when toggled on mobile devices.
I have got a workaround to it which is to set the position property of the section below the nav to relative and set top: -40px.
I will have to set the position property of the nav element to static as well for this to work.
However, I don't like this because it leaves a space between the two section elements on the page.
Is there a way I can get the mobile menu to have 100% height without having to change the position properties that I have at the moment?
Here is the link to the page I am talking about: https://carifood-init.appspot.com/
To troubleshoot your height: 100% problem, have a look at this post:
Working with the CSS height property and percentage values
As an alternative, use height: 100vh.
From the spec:
5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly.
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing
block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
Browser Compatibility (viewport units have pretty much full support among major browsers, except IE 9, 10 and 11, and Edge, don't support vmax)
use jquery for this job: There is an example i used to make height of a section 100% of screen (depending on the device that watch the page it will perform more or less height, so it's responsive).
<script>
$(document).ready(function(e) {
var wheight = $(window).height();
$('.section').css("min-height", wheight);
});
</script>
Hope it helps!
Keeping the aspect ratio of a <div> or similar element while being responsive to the parent's size seems to be a common problem. The solution that is widely regarded across the net as being the most elegant one is this:
Maintain the aspect ratio of a div with CSS
Using a wrapper element and defining the aspect ratio via the width and padding-bottom element, both of which are relative to the parent size.
div.wrapper {
width: 30%;
padding-bottom: 30%;
}
Now, my current problem is, that I need to introduce to introduce a max-height to these wrapper elements in order to make sure, that at least two rows of them fit the screen, independent of the viewport size. Adding max-height to the example above limits the element's height, but leaves the width unchanged.
However, an aspect ratio of 1:1 still needs to be maintained, even if the height is restricted via max-height. Also, I would like to have the group of wrapper elements (three or four columns, two rows) in the center of the viewport/parent.
Is there any pure html/css way to achieve this (without javascript)? I would not mind using <img> elements with a source of the desired ratio as I have to apply (background) images to these elements anyway but a universal, elegant solution as for the problem above would be appreciated.
You just have to use below code :
div.wrapper{
height:auto;
width:30%;
}
Then Problem is Solved