picture width should be equal to browser height - javascript

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%;
}
}

Related

Website look different on different monitor resolutions & css not working

I am building a simple login website and I keep on running into the same problems over and over again. I would fix my css and once I switch it to my second monitor, because i am doing dual screen, it stretches out and looks bad. I researched this and found that i can add
$("document").ready(function() {
var screenHeight = screen.height;
if (screenHeight < 800) {
$('body').css('zoom', 0.);
} else {
$('body').css('zoom', 1);
}
to my code but it made the media queries change position and I had to do countless editing to just get the same results. If someone can please look at my code and help me out? Basically I am just trying to get everything to look smooth on different screen resolution. And also "#img-div, #login-div" isnt allowing me to move he div's back up. It seems broken and I am sure its something to do with the media queries. Here is my code
https://jsfiddle.net/etjhyw0j/
On Second monitor
https://gyazo.com/5460eb6b46b9029945eff2cbbcc6c853
On Laptop screen
https://gyazo.com/8ddbd518e0f8d8a70af1612393939925
My screen resolution is 1366 X 768
Second screen resolution is 1920 X 1080
just set a decent max-width to your #container.
#container{
width: 100%;
min-width: 200px;
max-width:700px;
height: 100%;
margin: 0 auto;
position: relative;
top: 0%;
}
oh, and set the body background-size to "cover" or "contain" to prevent deforming the aspect ratio, don't use 100% 100%.
https://jsfiddle.net/etjhyw0j/4/

Mobile browsers resize textareas when entering input

I'm designing a rudimentary note-taking PWA, and my website (https://cloudwerewolf.github.io) works fine on desktop browsers and when launched from home screen on mobiles as a PWA, however when run in a mobile browser from navigating directly to the link, all textareas shrink when one of them is clicked on and I want the textareas to stay the same size as before instead of shrinking. Is it because of the keyboard skrinking the perceived width of the screen or is there another cause, and how can it be fixed?
EDIT: found & fixed the problem:
#media screen and (orientation:landscape) {
textarea {
width: 43.5%;
}
#notehead {
width: 20.5%;
}
#reH {
font-size: 24px;
}
}
#media screen and (orientation:portrait) {
textarea {
width: 80%;
}
#notehead {
width: 35%;
}
}
When the keyboard appeared on my screen, CSS decided that the orientation was now landscape due to the viewport width now being less than the viewport height, and changed the sizes of the textareas and font sizes accordingly. I took out that chunk of code and replaced it with width percentages for the portrait mode placed into the regular textarea{} and #notehead{} CSS areas, with maximum widths in pixels to prevent the textareas from becoming too wide on desktops.
In your CSS you are configuring your textarea to be min-width: 80%, so when the screen size is reduced the textarea will reduce until it reach the limit (80%) from here, the textarea won't reduce.
Try, maybe reducing the min-width: 80% to min-width: 20%
Please try to show your code in the question, we can help you to solve the problem in this manner not just putting a link to your website.

Make elements move horizontally only when window shrinks

I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!
#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}
It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}

Have Image take up as much of window as possible, without exceeding borders

Now the title of the question may have been worded the wrong way.
I want the image to take up 100% of the width or heigh (I guess whichever is larger). Kind of like when you have a photoviewer and there make be a black border on the sides or the top, depending which way it is.
Obviously if it's a very small image I don't want it to stretch, I never want any of the images to stretch, I just want them to fill as much of the window out as they can.
For example, when you load an image on Google, it doesn't show it's fullest resolution. It shrinks it down to fit within the borders of the page if it is to big. Then you can click on it to zoom in if you want.
How would I accomplish this? Thanks.
I think you would actually need the following:
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This requires a container with an explicit height set to work.
Example:
http://jsfiddle.net/AtxYb/4/
This is pretty easy to accomplish with CSS alone:
.container img {
max-width: 100%;
height: auto;
}
The max-width ensures that it never exceeds 100% of the width of its container. height tells the browser to size the image normally (eg. it's not going to stretch it width-wise, but not height-wise) and is included for older browsers.
You can of course also reverse this if you wish to match a container's height instead of width.
edit:
As pburgess suggests, if you wish your image to match either width or height, you need to declare both. See this jsfiddle: http://jsfiddle.net/XxgkG/
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Note this will not work in IE6 and is shaky in IE7. If you're coding for these sad, lonely browsers you should check out this answer.
Demo Fiddle
img{height:auto;width:100%;}
Try re-sizing the window - The image will take up the maximum space .

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.

Categories

Resources