Browsers like IE under Tools, Options, Advanced, have a checkbox for "enable automatic image resizing". Is it correct to say that this feature has nothing to do with the HTML and/or JavaScript on the page itself, and is functionality that the HTML and/or JavaScript on the page itself cannot command?
I ask because I cannot find a way to convince HTML IMG to behave in a manner that resizes by window size which of course can vary with the platform. One can set HTML IMG pixel height and/or pixel width, but that is without respect to the window size. And one can set HTML IMG percent height and/or percent width, but that is with respect to the original image size, not the window size.
I've seen suggestions to box the HTML IMG with a HTML DIV that sets height and/or width limits, but HTML IMG appears to blow out those limits. Ditto HTML HTML and/or HTML BODY limits. In all cases, HTML IMG appears to have a mind of its own, and will limit itself, especially vertically, solely with respect to the image itself, not any HTML container.
How to train HTML IMG to function as per container and/or window size? Would be grateful for actual examples not just suggestions. Thanks.
img { width:100%; height: auto; } will flex your image to the size of your container, be it your image container or document. Setting max-width and min-width will constraint the image to the sizes you want.
Here is a demo
http://jsfiddle.net/T6PvL/
Just push the result window so you can see how the image flexes. If you want to set a size constraint simply state img { max-width:300px /*or any other size you like */ and the image will only go as far as you tell it to.
You'll be needing to subscribe to the resize event of the window. Here is a code snippet. Each time the window resizes it is triggered. This script just sets the new dimensions into the spans
<script type="text/javascript">
//<![CDATA[
$(function () {
$(window).resize(function (e, e1) {
$("#wWidth").text($(window).width());
$("#wHeight").text($(window).height());
});
});
//]]>
</script>
<span id="wWidth"></span>
<span id="wHeight"></span>
Edit:
Check out the live demo here
Edit:
Resize the window in order to see the example at work.
Related
Well this is an odd behaviour.
I'm coding the frontend of a metrics app that must be viewed in a large tv.
I use Html, Js and Css (bootstrap 4).
It's for general public so we must hide browser tabs, etc..
Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.
The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.
Is this a known issue?
How to avoid this and cover on fullscreen?
I'ver tried auto, cover, 100% height, etc..
I found the solution right after posting my question.
html,body
{
min-height:100%;
}
The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.
This is my container:
.test {
height: 100vh;
}
update: This actually works without problem in firefox.
Which stretches to the full height of the webpage whenever the page is loaded, but when I resize the page vertically, it seems the viewport is not updated. In this first image, the div is the full height of the viewport:
However, when I resize the browser window vertically, the .test div is not updated - see image below.
To see for yourself, please check out the codepen here: http://codepen.io/anon/pen/CLbqy
Should I resize the window horizontally however, the height resets to the correct viewport height.
one possible suggestion is that you should use % instead vw or vh. Since we may not be able to give font-size in %, instead of px or em, we can use vw or similar kind of stuff.
And now if fonts given in vm they will not load the new change of window height and width if re-sized. So here is a small solution which I found in some random article.
causeRepaintsOn = $("#yourTagIdWithFontInVM");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
This is the link where I found the above solution. Link
This might be an issue with scrolling in the CodePen iframe. It worked better for me when I prevented the page from overflowing:
html, body {
margin:0;
padding:0
}
I use a lot of absolute elements in my website design so that it will mold to whatever browser dimensions are being used, but there is a minimum size that I want to use. In other words, I want my website to become compact as the browser is being resized smaller but at a certain point I want the overflow:auto attribute to kick in and force the user to see the whole page using scrolling instead of compacting the page further.
Any ideas? I tried putting in an empty table with specific dimensions into an element with overflow:auto, but that didn't work. I am not a terribly experienced web-designer.
CSS
html, body {
min-width: 980px;
}
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've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.
The div that contains all the photos, #people, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.
However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.
Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.
Update Here's an example: http://jsfiddle.net/hbms2/9/. At the default display, all the blue controls are on one line. When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.
Well, this is pretty simple. You set #controls to width:100% that means it will only be as wide as the window. What you should do, since it is fixed positioned, is set the sides to left:0; right:0; (so it covers the page) and the min-width wide enough to fit your controls.
body {
min-width:700px
}
#controls {
left:0;
right:0;
min-width: 700px;
}
Now when you resize the window to less than 700px, your controls will not squish together, and you can use the scrollbar to access off-screen content.
Here it is using your jsfiddle: http://jsfiddle.net/hbms2/14/
Note: I only applied the fix to the controls section, content in the other div's will still squish together since you specified their width with a percentage. (You should avoid doing that) However, you can fix it using the same method.
The control elements will still be hidden if the viewport is smaller than their width. There is no way to fix this using CSS; you would have to use javascript (which would be complicated, cumbersome, and probably wouldn't even yield the desired result) or you can make another site designed for smaller viewports. The latter is by far the better option.
Thanks for making the example like I suggested, it makes answering the question a lot easier.
The only pure CSS solution I know that will even come close are media queries, and you'll have to do a lot of trial and error, and eventually the result might not be 100 perfect.
Therefore, I resorted to JavaScript (jQuery for comfort).
You can achieve this by testing $(window).resize and changing the margin-top of the #people element to match #header's height.
Here's an example!
What I did:
$(function() {
$people = $('#people'); //Cache them to not waste
$header = $('#header'); //browser resources.
$(window).resize(function() { //When window size changes
//Check if the height changed
if ($people.css('margin-top') != $header.height() + 5) {
//Change height if it has.
$people.css('margin-top', $header.height() + 5 + 'px');
}
});
});
I am just giving it a try and I am playing around, but would something like this with dynamic heights work?
http://jsfiddle.net/hbms2/10/
Or am I completely on the wrong track here?