Develop Reference

picture width should be equal to browser height

On my website, I want to have a header image, of exactly the same height as the browser. So when you open the website you should see a picture, which covers all of the screen but isn't a background image. This way you should be able to move away from the image if you scroll down. The problem is, that if I say "browser height = pixel height", the format of the picture will change.
Because of that, I need to have a function, that automatically changes the width of the picture to the height of the browser or rather the amount of vertical pixels your browser has. If you scroll for example the picture shouldn't change.
Until now I have only tried CSS because I have no experience with javascript. After visiting many websites I still haven't found a solution to this problem. Here you can see what the website should look like on pc and a mobile device.
If I however try to look at the mobile version, it looks like this, even though it should look like the first picture.

Did you try to add media only attribute to your css? I used below max width 428 px because that is mainly on iPhone 13 but you can change it if you want.
.imageexample
{
display: block;
width:428px;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.box
{
display:inline-block;
width:100%;
text-align:center;
}
#media only screen and (max-width: 428px)
{
.imageexample
{
width:100%;
}
}

A good alternative to this use of CSS "width: fit-content" in a responsive layout?

I'm working on creating a responsive layout for this website: https://json-z.org/
The layout follows a typical pattern of spreading out horizontally when screen real estate permits, but then using more and more vertical stacking of components as screen/window dimensions narrow.
At phone-sized portrait widths, however, I found I needed to squeeze things just a bit more than vertically stacking could accomplish. My first method of paring down required width looked like this:
#media screen and (max-width: 374px) {
.details-wrapper {
margin: -10% -15% -15% -10%;
}
.details {
transform: scale(0.80);
}
}
This got the job done, but I really wanted something that smoothly applied just as much scaling down as necessary, and no more, for any particular screen width, and that also automatically computed just the right margins to match any particular scaling factor.
To make a long story short, I created an Angular component to do the job, and the code can be found here: shrink-wrap.component.ts, shrink-wrap.component.html, shrink-wrap.component.scss.
What concerns me is that I'm relying on width: fit-content to make this work.
.outer-wrapper {
position: relative;
}
.sizer {
height: 1px;
opacity: 0;
position: absolute;
width: 100%;
z-index: -1000;
}
.inner-wrapper {
overflow: visible;
position: relative;
width: -moz-fit-content;
width: fit-content;
}
The MDN website describes fit-content as:
This is an experimental API that should not be used in production code.
Despite this warning, however, the CSS is working well for Chrome on Windows and Mac, Firefox on Windows and Mac, and Safari on Mac and iOS (as tested on both a big iPhone XS Plus and a tiny iPhone 5S). It works OK on Edge for typical desktop usage, but falls a part a bit at very narrow window sizes.
Oddly enough, the following is not listed as experimental:
.some-class {
display: grid;
grid-template-columns: fit-content(100%);
...
...but wasn't anywhere near as compatible across as many browsers.
Can anyone recommend a better alternative to fit-content?
What I need is for the container of the panel I'm trying to shrink to go no smaller than the minimum the panel requires, while both a sibling of that container, and the parent of both, get smaller as screen/window width demand.
While inner-wrapper is 362 pixels wide, sizer and outer-wrapper are both only 336 pixels wide, and it's precisely this ratio, 336/362, that tells me the exact amount of scaling that I need.

making a video full screen using full screen API

I have a video inside a div
When I use this code to expand the video
if (video.requestFullScreen) {
video.requestFullScreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
The video expands to the browser width and height rather than expanding the whole chrome window to the full screen size.
UPDATE : This was only happening with my browser ! There was no issue in the code

Use vh and vw.
video {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
1vh is 1% of the total portview height, 1vw is 1% of the total portview width. By default, the html and body tags only take up the height that the content does, not the entire screen. Similarly, a page with more than one screen's worth of content will have 100% be more space than 100vh.
position: fixed; for good measure so that it sits above the rest of the content in the corner and makes a snug fit.
Edit: Changed "absolute" to "fixed" so it will fit correctly on a long or wide page. fixed is relative to the browser, whereas absolute is relative to the parent container.
Edit 2: You've changed your question to ask how to make a video fullscreen, not fullpage. The answer subsequently changes.
Here is a guide on accomplishing this; be aware it uses JS and requires the user's approval of the action. You cannot hijack a user's browser.
http://www.sitepoint.com/use-html5-full-screen-api/

Image max-height

I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!

Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.

You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.

Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.

I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>

how can I shape the image size according to its nested box

there is a web site called: SPAM
I am trying to make the same home page of this web site using js, jquery and some css.
Now, the question is how to fix the image size according to the box in the center.
How can I create best user experience as if SPAM has.
You may experience by viewing the web site of SPAM in different
resolution or small and big windows size of explorer.
How can I do it? Answers and code help or suggestions for the best user experience for SPAM ?

This is flash... but you can do the same with some jQuery:
html:
<div id="container"></div>
css:
#container {
min-width: 500px;
width: 100%;
height: 100%;
position: relative
background: url('path') 0 0 no-repeat;
}
jQuery:
$(window).bind("resize", function() {
var $winwidth = $(window).width(); //specify some padding here
$("#container").attr({
width: $winwidth
});
});

To start, make the <did id='main'> to take the width of the screen
#main { width:100% }
then, the image(s) inside should have a similar styling:
#main img { width:100% }
please note that the image height is not set, to make it automatically scale with the right proportions.
This should help to obtain an effect similar to the mentioned site.

You can use
margin: 0 auto;
on the inner element so it is horizontally aligned.